dialogRegionExample.js

var DialogRegion = Backbone.Marionette.Region.extend({
    el: '#form_dialog_div',
    constructor: function () {
        _.bindAll(this, "getEl", "showDialog", "hideDialog");
        Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
        this.on("show", this.showDialog, this);
    },
    getEl: function (selector) {
        var $el = $(selector);
        return $el;
    },
    showDialog: function (view) {
        view.on("close", this.hideDialog, this);
        var dialogOptions = (typeof view.dialogOptions === 'function')?view.dialogOptions():view.dialogOptions;
        this.$el.dialog(dialogOptions);
        this.$el.dialog('open');
    },
    hideDialog: function () {
        this.$el.dialog('close');
    }
});

var BaseLayoutView = Backbone.Marionette.LayoutView.extend({
  template: "#base_layout_template",
  regions: {
  	dialog: DialogRegion    
  },
  ui:{
  	createButton: '.tsg-parts-entity-access-create-entry-button'
  },
  events:{
  	'click @ui.createButton': 'createNewEntry'
  },
  createNewEntry: function(){
  	this.showChildView('dialog', new EntityAccessListCreateNewDialogView({
      collection: this.getRegion('detailsTbody').currentView.collection
    }));
  },
});