showModalDialog jquery插件

Question

在我的旧应用程序中，我们使用的是showModalDialog，因为你们都知道最新的Chrome已经移除了对showModalDialog的支持，这是一件痛苦的事情。我正在寻找一个像jquery插件一样的快速修复。例如，对话框($window.showModalDialog，varArgIn，varOptions)；…。

Answer 1

您可以在2015年5月之前临时重新启用showModalDialog支持(请参阅https://stackoverflow.com/a/25663402/961695)。

利用这段时间来更新你的代码。不会有“速战速决”。showModalDialog做过的一件事是任何插件都不会做的--它会停止代码执行，直到对话框关闭并将对话结果返回给调用者。你必须重构你的代码来使用回调函数。然后你可以使用像jQuery UI Dialog这样的东西

Answer 2

这个网址是2011年有人写的一篇文章，它提供了showModalDialog的jquery替代品。

http://extremedev.blogspot.com/2011/03/windowshowmodaldialog-cross-browser-new.html

我在我自己的项目中使用它。我唯一的问题(我最近发现的)是，如果我的父页面是可滚动的，我可以向下滚动父窗口，并转到不应该滚动的页面元素。

除此之外，它的工作很好(即。对于不能滚动的页面，我启动模式对话框，它屏蔽了对父页面的访问，并在关闭模式对话框时返回一个值，模式对话框内容来自一个URL，就像原始的showModalDialog函数一样。

以下是我对他的代码的完整版本。我添加了一些帮助器函数等等。只需包含常用的jquery内容，然后执行此命令，并按照他的示例生成一个对话框。

// Based on this article: http://extremedev.blogspot.com/2011/03/windowshowmodaldialog-cross-browser-new.html
/*
Usage example:
var url = 'test.html';

$.showModalDialog({
     url: url,
     height: 500,
     width: 900,
     scrollable: false,
     onClose: function(){ var returnedValue = this.returnValue; }
});

UPDATE August 2012: Looks like there is a problem when setting DocType: HTML 4.01 Doctype on top of extremedevStart.html. --> The popup does not close.
To fix this use:

$dlg.dialogWindow.dialog('close');

instead of:
window.close(); 

*/


var $dialog = null;

jQuery.showModalDialog = function (options) {

    var defaultOptns = {
        url: null,
        dialogArguments: null,
        height: 'auto',
        width: 'auto',
        position: 'center',
        resizable: true,
        scrollable: true,
        onClose: function () { },
        returnValue: null,
        doPostBackAfterCloseCallback: false,
        postBackElementId: null
    };

    var fns = {
        close: function () {
            opts.returnValue = $dialog.returnValue;
            $dialog = null;
            opts.onClose();
            if (opts.doPostBackAfterCloseCallback) {
                postBackForm(opts.postBackElementId);
            }
        },
        adjustWidth: function () { $frame.css("width", "100%"); }
    };

    // build main options before element iteration

    var opts = $.extend({}, defaultOptns, options);

    var $frame = $('<iframe id="iframeDialog" />');

    if (opts.scrollable)
        $frame.css('overflow', 'auto');

    $frame.css({
        'padding': 0,
        'margin': 0,
        'padding-bottom': 10
    });

    var $dialogWindow = $frame.dialog({
        autoOpen: true,
        modal: true,
        width: opts.width,
        height: opts.height,
        resizable: opts.resizable,
        position: opts.position,
        overlay: {
            opacity: 0.5,
            background: "black"
        },
        close: fns.close,
        resizeStop: fns.adjustWidth
    });

    $frame.attr('src', opts.url);
    fns.adjustWidth();

    $frame.load(function () {
        if ($dialogWindow) {

            var maxTitleLength = 50;
            var title = $(this).contents().find("title").html();

            if (title.length > maxTitleLength) {
                title = title.substring(0, maxTitleLength) + '...';
            }
            $dialogWindow.dialog('option', 'title', title);
        }
    });

    $dialog = new Object();
    $dialog.dialogArguments = opts.dialogArguments;
    $dialog.dialogWindow = $dialogWindow;
    $dialog.returnValue = null;
}

//function postBackForm(targetElementId) {
//    var theform;
//    theform = document.forms[0];
//    theform.__EVENTTARGET.value = targetElementId;
//    theform.__EVENTARGUMENT.value = "";
//    theform.submit();
//}

var prntWindow = getParentWindowWithDialog(); //$(top)[0];

var $dlg = prntWindow && prntWindow.$dialog;

function getParentWindowWithDialog() {
    var p = window.parent;
    var previousParent = p;
    while (p != null) {
        if ($(p.document).find('#iframeDialog').length) return p;

        p = p.parent;

        if (previousParent == p) return null;

        // save previous parent

        previousParent = p;
    }
    return null;
}

function setWindowReturnValue(value) {
    if ($dlg) $dlg.returnValue = value;
    window.returnValue = value; // in case popup is called using showModalDialog

}

function getWindowReturnValue() {
    // in case popup is called using showModalDialog

    if (!$dlg && window.returnValue != null)
        return window.returnValue;

    return $dlg && $dlg.returnValue;
}

if ($dlg) window.dialogArguments = $dlg.dialogArguments;
if ($dlg) window.close = function () { if ($dlg) $dlg.dialogWindow.dialog('close'); };

function CloseWindow() {
    if ($dlg) {
        $dlg.dialogWindow.dialog('close');
    } else {
        ForceCloseWindow();
    }
}

function ForceCloseWindow() {
    var browserName = navigator.appName;
    var browserVer = parseInt(navigator.appVersion);
    //alert(browserName + " : "+browserVer);

    //document.getElementById("flashContent").innerHTML = "<br>&nbsp;<font face='Arial' color='blue' size='2'><b> You have been logged out of the Game. Please Close Your Browser Window.</b></font>";

    if (browserName == "Microsoft Internet Explorer") {
        var ie7 = (document.all && !window.opera && window.XMLHttpRequest) ? true : false;
        if (ie7) {
            //This method is required to close a window without any prompt for IE7 & greater versions.
            window.open('', '_parent', '');
            window.close();
        }
        else {
            //This method is required to close a window without any prompt for IE6
            this.focus();
            self.opener = this;
            self.close();
        }
    } else {
        //For NON-IE Browsers except Firefox which doesnt support Auto Close
        try {
            this.focus();
            self.opener = this;
            self.close();
        }
        catch (e) {

        }

        try {
            window.open('', '_self', '');
            window.close();
        }
        catch (e) {

        }
    }
}