使用 jQuery UI 和 Bootstrap 实现可调整大小和嵌套的模态对话框

引言

该项目的目标是展示如何创建可调整大小的嵌套模态框。每个模态框都通过 iframe 从另一个页面创建。这种方法允许您动态加载任意数量的模态框。请解压缩 bsModal.zip 到虚拟目录，并将浏览器指向 Default.htm。

代码包含在 BsModal.js 文件中。

var oBsModal = { oWinList: [], x: 0, y: 0, oDragItem: null };

function ShowModal(sUrl, iWidth, iHeight, oWin) {
    if (oWin + "" == "undefined") oWin = window;
    if (iWidth + "" == "undefined") iWidth = $(window).width() - 100;
    if (iHeight + "" == "undefined") iHeight = $(window).height() - 150;

    oBsModal.oWinList.push(oWin);
    var iIndex = oBsModal.oWinList.length;

    $(document).on('show.bs.modal', '.modal', function (event) {
        var zIndex = 1040 + (10 * $('.modal:visible').length);
        $(this).css('z-index', zIndex);

        setTimeout(function () {
            $('.modal-backdrop').not('.modal-stack').css
                  ('z-index', zIndex - 1).addClass('modal-stack');
        }, 0);
    });

    $("#popupContainer" + iIndex).remove();
    $("body").append('<div id="popupContainer' + iIndex + 
    '" class="modal fade" role="dialog">' +
            '<div id="popupDialog' + iIndex + '" 
                class="modal-dialog" style="width: ' + (iWidth + 30) + 'px">' +
                '<div class="modal-content" id="modal-content' + iIndex + '">' +
                    '<div id="popupTitleBar' + iIndex + '" 
                     class="modal-header" style="cursor: move">' +
                        '<button type="button" class="close" 
                          data-dismiss="modal">&times;</button>' +
                        '<h4 style="pointer-events: none;" id="popupTitle' + 
                          iIndex + '" class="modal-title"></h4>' +
                    '</div>' +
                    '<div class="modal-body">' +
                    '<div id="idDiaLoading' + iIndex + '" style="text-align: center;
                      width:100%; height:' + iHeight + 'px; line-height:' + iHeight + 'px;">
                      <i style"vertical-align: middle" 
                      class="fa fa-spinner fa-spin fa-5x"></i></div>' +
                    '<div id="idDiaOverlay' + iIndex + '" 
                      style="background-color: transparent; position: absolute;width: 100%; 
                      z-index: 10000; display: none;"></div>' +
                    '<iframe id="popupFrame' + iIndex + '" name="popupFrame' + 
                      iIndex + '" onload="SetPopupTitleBar(this,' + iIndex + ')" 
                      src="' + sUrl + '" ' +
                        'style="display:none; margin: 0px; position: relative; 
                         z-index: 202; width:100%; height:100%;background-color:transparent;" 
                         scrolling="auto" frameborder="0" allowtransparency="true" 
                         width="100%" height="100%"></iframe>' +
                    '</div>' +
                 '</div>' +
            '</div>' +
        '</div>');

    $("#popupContainer" + iIndex).modal();
    $("#popupFrame" + iIndex).css({ height: iHeight });
    $("#popupContainer" + iIndex).on('hidden.bs.modal', function () {
        if (oBsModal.oWinList.length > 0) oBsModal.oWinList.length--;
    })

    DiaMakeDraggable(iIndex);
}

function DiaMakeDraggable(id) {
    var o = $("#idDiaOverlay" + id);

    $("#modal-content" + id).resizable({
        alsoResize: "#popupFrame" + id,
        start: function (event, ui) {
            o.height(o.parent().height());
            o.show();
        },
        stop: function (event, ui) {
            o.hide(); ;
        }
    });

    $("#modal-content" + id).draggable({
        start: function (event, ui) {
            o.height(o.parent().height());
            o.show();
        },
        stop: function (event, ui) {
            o.hide(); ;
        }
    });
}

function HideModal() {
    var iIndex = oBsModal.oWinList.length;
    $("#popupContainer" + iIndex).modal("hide");
}

function GetModalWin() {
    return oBsModal.oWinList[oBsModal.oWinList.length - 1];
}

function SetPopupTitleBar(oIframe, iIndex) {
    try {
        $("#popupTitle" + iIndex).html(oIframe.contentWindow.document.title);
    } catch (ex) {
        $("#popupTitle" + iIndex).hide();
    }

    $("#idDiaLoading" + iIndex).hide();
    $("#popupFrame" + iIndex).show();
}

该文件将允许您

1. 使用 iFrame 在模态对话框中打开 URL
2. 创建嵌套对话框
3. 在页面加载时显示加载指示器
4. 以全屏对话框打开外部页面
5. 在页面上移动模态对话框
6. 调整模态对话框的大小

该代码使用了四个外部库

1. jQuery (1.12.3)
2. jQuery UI (v1.12.1)
3. Bootstrap (3.3.6)
4. Font-awesome (4.4.0)

背景

本文是我的上一篇文章 使用 Bootstrap 创建嵌套模态对话框 的后续。区别在于本文使用 jQuery UI 进行拖动，并展示了如何调整对话框的大小。

Using the Code

要使用此代码，请在创建第一个对话框的页面中包含 BsModal.js 文件。关键函数是 ShowModal()。它接受以下参数

sUrl	要加载的页面的 URL
iWidth	模态框的宽度。可选。当银行窗口宽度将被使用
iHeight	模态框的高度。可选。当银行窗口高度将被使用
oWin	调用模态框页面的 windows 对象。可选

从主页 (Default.htm)，ShowModal() 函数可以这样使用

 <input type="button" class="btn btn-info" value="Open Modal1.htm" 
  onclick="ShowModal('Modal1.htm',300,430)">

从对话框页面，ShowModal() 函数可以这样使用

 <input type="button" class="btn btn-info" value="Open Modal2.htm" 
  onclick="parent.ShowModal('Modal2.htm',300,350,window)"> 

可以通过调用 HideModal() 函数关闭模态对话框，如下所示

<button type="button" class="btn btn-default" 
onclick='parent.HideModal()'>Cancel</button> 

历史

• 2016年11月29日：初始版本