How to load modal dialog with layout content?

How to load modal dialog with layout content?

How and where should I define region or function with modal dialog
functionality so that I can load it in one or two specified cases in views
e.g. like through MyApp.modal.show(content)?
Example:
var ModalRegion = Backbone.Marionette.Region.extend({
el: "#modal",
constructor: function(){
_.bindAll(this);
Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
this.on("view:show", this.showModal, this);
},
getEl: function(selector){
var $el = $(selector);
$el.on("hidden", this.close);
return $el;
},
showModal: function(view){
view.on("close", this.hideModal, this);
this.$el.modal('show');
},
hideModal: function(){
this.$el.modal('hide');
}
});
How to use it in this view?
MyApp.Views.Layouts.Unauthenticated = Backbone.Marionette.Layout.extend({
template: 'layouts/unauthenticated',
regions: {
//modal: ModalRegion, //Region must be specified as a selector string
or an object with selector property
tabContent: '#tab-content'
},
events: {
'click #showLogin': 'showLogin'
},
views: {},
showLogin: function(){
this.views.login = BD.Views.Unauthenticated.Login;
MyApp.modal.show(new this.views.login);
},