Adaptation of Derick Bayley Notification Region to be used with Twitter Bootstrap and Backbone 1.0

1.html

<script id="modal-view-template" type="text/html">
  <div class="modal-header">
    <h2>This is a modal!</h2>
  </div>
  <div class="modal-body">
    <p>With some content in it!</p>
  </div>
  <div class="modal-footer">
    <button class="btn">cancel</button>
    <button class="btn-default">Ok</button>
  </div>
</script>

<div id="modal"></div>

2.js

var view = new MyView();
view.render();

var $modalEl = $("#modal");

$modalEl.html(view.el);
$modalEl.modal();

3.js

var ModalRegion = Backbone.Marionette.Region.extend({
  el: "#modal",
  
  constructor: function(){
    _.bindAll( this, "getEl", "showModal", "hideModal" );
    Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
    this.listenTo(this, "show", this.showModal, this);
  },
  
  getEl: function(selector){
    var $el = $(selector);
    $el.attr("class","modal hide fade")
    $el.on("hidden", this.close);
    return $el;
  },
  
  showModal: function(view){
    this.listenTo(view, "close", this.hideModal, this);
    this.$el.modal('show');
  },
  
  hideModal: function(){
    this.$el.modal('hide');
  }
});

4.js

var App = new Backbone.Marionette.Application();

App.addRegions({
  main: "#main-content",
  modal: ModalRegion
});

// somewhere else in the app
var view = new MyView();
App.modal.show(view);