My version of Dialog/Modal/Popup region for Backbone.Marionette using Bootstrap modal

1_DialogRegion.js

define([
    'app',
    'marionette'
], function(app, Marionette){

    return  Marionette.Region.extend({
        onShow: function(view){
            this.listenTo(view, "dialog:close", this.closeDialog);

            var self = this;
            this.$el.modal({
                backdrop: true,
                keyboard: true,
                show: true
            });
        },

        closeDialog: function(){
            this.stopListening();
            this.close();
            this.$el.modal('hide');
        }
    });

});

2_DialogView.js

define([
	'marionette'
], function (Marionette) {
	'use strict';

	return Marionette.ItemView.extend({
	    template: 'modal_content_with_close_btn',
	    
	    events: {
            	'click .close': function(e) {
                e.preventDefault();
                this.trigger('dialog:close');
            }
        }
	});
});

3_modal_template.html

<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title"><i class="fa fa-life-ring"></i> Help</h4>
        </div>
        <div class="modal-body">
            This is help text html.
        </div>
    </div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->

4_layout.html

<!--
Your layout html should contain the following html.
Then you have to use #dialog as the region element. For example -

app.addRegions({
	main: '#main',
	dialog: {
        selector: "#dialog",
        regionType: DialogRegion
    }
});
-->

<div class="modal fade" id="dialog" tabindex="-1" role="dialog" aria-hidden="true">
</div><!-- /.modal -->