Basic Bootstrap Modal in backbone that will clean up after itself to avoid memory leaks. View triggered on button click => modalView = new BaseModalView(); modalView.show();

BaseModal.handlebars

    <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">Modal title</h4>
        </div>
        <div class="modal-body">
          ...
        </div>
        <div class="modal-footer">
          <a href="#" class="btn">Close</a>
          <a href="#" class="btn btn-primary">Save changes</a>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->

BaseModal.js

define(['underscore', 'backbone', ], function(_, Backbone) {
  var BaseModalView = Backbone.View.extend({
        
        id: 'base-modal',
        className: 'modal fade hide',
        template: 'modals/BaseModal',
        
        events: {
          'hidden': 'teardown'
        },
        
        initialize: function() {
          _(this).bindAll();
          this.render();
        },

        show: function() {
          this.$el.modal('show');
        },

        teardown: function() {
          this.$el.data('modal', null);
          this.remove();
        },

        render: function() {
          this.getTemplate(this.template, this.renderView);
          return this;
        },
        
        renderView: function(template) {
          this.$el.html(template());
          this.$el.modal({show:false}); // dont show modal on instantiation
        }
     });
     
  return BaseModalView;
});

@eightyeight, @the1mills same see original thread https://stackoverflow.com/questions/16085852/rendering-bootstrap-modal-using-backbone/17982356. I didn't have my notifications turned on