Javascript 删除showModalDialog API

随着

showModalDialog

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

虽然我们已将对showModalDialog的调用集中到3行代码，但我们广泛依赖此代码提供来自模态用户提示的反馈（快速搜索解决方案可发现约2400个实例）

我们可以相当容易地删除

showModalDialog

，并用基于Javascript/css的替代方案替换它，这不是问题。我们面临的问题是，所有调用代码将不再被阻塞

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

由于引入了非阻塞替代方案，上述内容将完全失效。我们也不能使用内置的阻塞方法（警报、确认），因为对话框按钮在许多情况下都是定制的，并且样式也适合我们的应用程序

基于以上内容，是否有任何实用的变通方法/解决方案可用于避免重新考虑太多以前阻塞的遗留代码？

您可以使用异步、基于事件的代码

避免手动重新考虑代码的实用变通方法

您可以尝试一个javascript-to-javascript编译器，将其转换为js。它应该自动将代码传输到异步版本

---

免责声明：我没有使用任何这些

您可以通过使用my来避免使用回调函数，my会暂停后续语句的执行，直到关闭模式。它通过使用生成器、承诺和

yield

关键字来实现。它在最新的Opera和Google Chrome中工作。

在jQuery的1.11.4版本中，有一个内置的

可以使用，它还允许在关闭时捕获回调参数

    $("#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);

    });

唯一需要注意的是，由于这使用IFrame，如果站点上的安全性阻止将外部站点引入到您自己的站点（如果您以这种方式使用它），那么它可能不起作用。例如，谷歌就禁止在他们的网站上使用这种功能

---

这应该是一个跨平台的例子——我已经在IE11中进行了测试。“Polyfill”是我看到其他人说的另一种方法，它在IE中不起作用，也不起作用，因为它依赖于

Promise

，而这在IE中是不受支持的，正如在本页底部显示的那样：

这正是我要找的那种东西，但是浏览器支持是一个真正的问题。我们需要IE10+、Chrome、Firefox和Safari 6+。如果需要支持其他浏览器，您可以使用。我有一个演示跨浏览器解决方案的示例。然而，我最初的问题仍然存在。对showModalDialog的调用确实是异步的，但是调用代码并不遵守这一点，而是继续执行。我做错什么了吗？有没有办法避免重写对doDialog的每次调用？@BrettPostin我提出了一个更清晰的跨浏览器方法。由于spawn（）返回一个承诺，您应该在外部函数生成器中的它之前添加

yield

，等待它完成。请参阅。可能的副本

    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();
    });