how to get twitter bootstrap.modals play well with backbone?

Question

as subject, I've already read another question regarding the similar problem: modal-dialog-with-backbone-and-marionette

But I don't want to introduce backbone.marionette into my project.

I'm wondering if there's any other alternatives?

Answer 1

I solved it by placing and empty div as container for modal dialog into the bottom of my page:

    <!-- Charge -->
    <div id="charge_dialog_container" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    </div>

defined the rest of the dialog in the template:

    <script id="charge_dialog_template" type="text/template">
        <div class="modal-header">
            ...
        </div>
        <div class="modal-body">
            ...
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" data-dismiss="modal"><i class="icon-ok"></i> OK</button>
        </div>
    </script>

During the view construction in initialize function I did the modal() stuff:

        ChargeView = Backbone.View.extend({
            el: $('#charge_dialog_container'),
            initialize: function() {
                this.render();
                this.$el.modal({'backdrop': 'static'});
            },
            render: function() {
                var template = _.template($('#charge_dialog_template').html());
                this.$el.html(template);
            }
        });