modalBootstrap.js

(function ($, _, Backbone) {

    var template = _.template(
            '<div class="modal-dialog modal-lg">' +
            '<div class="modal-content">' +
            '<div class="modal-header">' +
                ' <% if (allowCancel) { %> ' +
                '    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
                '  <% } %>' +
                '  <h3 class="js-modal-title css-modal-title"><% if (title) { %><%=title%><% } %></h3>' +
                '</div>' +
                '<div class="modal-body" style="max-height : none; overflow-y  : hidden;">'+
                '<iframe style="border : none; width : 100%;"src="<%=src%>">'+
                '</div></div></div>'),
        Modal = Backbone.View.extend({

            tagName :   "div",
            className : "bootstrap-iframe-modal modal fade bs-modal-lg",

            initialize : function (options) {
                this.options = _.extend({
                    title :         null,
                    allowCancel :   true,
                    escapeOnClick : false,
                    animate :       true,
                    template :      template,
                    closeTarget :   "Images/1x1.gif"
                }, options);
            },

            render : function () {
                var controlHide = _.bind(this.controlHide, this),
                    iframeReload = _.bind(this.iframeReload, this),
                    _resize = _.bind(this._resize, this);
                this.$el.html(this.options.template(this.options));
                if (this.options.animate) {
                    this.$el.addClass("fade");
                }
                this.isRendered = true;
                this.$el.on("hide.bs.modal", controlHide);
                this.$iframe = this.$el.find("iframe");
                this.$iframe.on("load", iframeReload);
                $(window).on("resize", _resize);
            },

            open : function () {
                var $el = this.$el;

                if (!this.isRendered) {
                    this.render();
                }

                $el.modal(_.extend({
                    keyboard : this.options.allowCancel,
                    backdrop : this.options.escapeOnClick ? true : 'static'
                }, this.options.modalOptions));

                this._resize();
                this.trigger("open");
            },

            close : function () {
                this.trigger("hide");
            },

            iframeReload : function () {
                var title, doc = this.$iframe[0].contentDocument || this.$iframe[0].contentWindow.document;
                if (doc && doc.location && doc.location.href &&
                    doc.location.href.toLowerCase().indexOf(this.options.closeTarget.toLowerCase()) > -1) {
                    this.canBeRemoved = true;
                    this.$el.modal("hide");
                    $(".modal-backdrop").remove();
                    this.trigger("close");
                } else {
                    title = this.options.title;
                    if (!title) {
                        title = (doc && doc.title) ? doc.title : "";
                    }
                    this.$el.find(".js-modal-title").text(title);
                    this._resize();
                }
            },

            controlHide : function (event) {
                var currentModal = this;
                if (this.canBeRemoved) {
                    _.defer(function () {
                        currentModal.remove();
                    }, 10);
                    return true;
                }
                event.preventDefault();
                this.$iframe.attr("src", this.options.closeTarget);
                return false;
            },

            _resize : function () {
                var $window = $(window),
                    $width = $window.width() * 0.8,
                    $height = $window.height() * 0.8;

                this.$iframe.height($height - this.$iframe.position().top - 65);
            }

        });

    Backbone.BootstrapIframeModal = Modal;

})(jQuery, _, Backbone);