删除showModalDialog API

Question

随着showModalDialog API即将从各种浏览器中删除，我们公司和其他许多提供大型企业web应用程序的公司一样，现在面临着一个重大的困境。

虽然我们已经将对showModalDialog的调用集中到了3行代码，但是我们广泛地依赖于这段代码来提供来自模态用户提示的反馈(快速搜索解决方案可以发现大约2400个实例)。

我们可以很容易地拔出showModalDialog，用基于Javascript/css的替代方案来代替它，这不是问题。我们面临的问题是，所有的呼叫代码都将不再阻塞。

if(doConfirm(...)) {
   ...
} else {
   ...
} 

由于引入了一种非阻塞的替代方案，上述情况将完全失败.我们也不能使用内置的阻塞方法(警报，确认)，因为对话框按钮在许多情况下都是自定义的，而且样式也适合我们的应用程序。

基于以上所述，是否有任何实用的解决方案可以用来避免重新考虑遗留的先前阻塞代码？

Answer 1

您可以通过使用my showModalDialog填充避免使用回调函数，它会暂停后续语句的执行，直到模式关闭为止。它通过使用生成器、允诺和yield关键字来做到这一点。它适用于最新的Opera和。

Answer 2

在jQuery的1.11.4版本中，您可以使用内置的<dialog>，它还允许在close上捕获回调参数。

    $("#dialog").dialog({
        autoOpen: false,
        width: 500,
        height: 500,
        modal: true
        buttons: [
            {
                text: "Ok",
                click: function () {
                    $(this).dialog("close");
                }
            },
            {
                text: "Cancel",
                click: function () {
                    $(this).dialog("close");
                }
            }
        ]
    });

您的值可以从按钮单击事件的回调函数中捕获。

您甚至可以添加HTML，将自己的'x‘按钮附加到现有的“关闭”按钮中，并隐藏原始按钮，这样您就可以随心所欲地操作：

    $(document).ready(function () {
        var closeHtml = '<a href="#" id="dialog-close" style="position: absolute; top: 0; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;">&times;</a>';
        $("button[title='Close']").css('display', 'none').parent().append(closeHtml);

    });

然后从'x‘按钮将一个click事件附加到dialog-close ID：

    var url = 'https://www.cnn.com';

    // Link to open the dialog
    $("#dialog-link").click(function (event) {
        var dialog = $("#dialog");
        dialog.dialog("open");

        dialog.html('<iframe id="dialog-body" scrolling="yes" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>');

        $("#dialog-close").on('click', function (e) {
            // ...do whatever you want here, then...
            $("button[title='Close']").click();
            //e.preventDefault();
            //dialog.close();
        });

        event.preventDefault();
    });

但是请注意，因为这使用了IFrame，如果站点上的安全性阻止将外部站点引入您自己的站点，如果您以这种方式使用它，它可能无法工作。例如，谷歌( Google )在他们的网站上阻止了这种使用。

这应该是一个跨平台的例子-我已经在IE11中测试过它。我见过其他人说这是另一种方法，不是，也不适用于IE，因为它依赖于在IE中不受支持的Promise，如本页底部所示：对象/承诺