5

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

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

我们可以showModalDialog相当容易地删除它并用基于 Javascript/css 的替代方案替换它，这不是问题。我们面临的问题是所有调用代码将不再阻塞，例如

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

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

基于上述内容，是否有任何实用的变通办法/解决方案可以用来避免不得不重构这么多以前阻塞的遗留代码？

4

3 回答 3

2

您可以通过使用我的showModalDialog polyfill来避免使用回调函数，它会暂停后续语句的执行，直到模式关闭。它通过使用生成器、承诺和yield关键字来实现。它适用于最新的 Opera 和 Google Chrome。

于 2014-08-05T04:02:48.223 回答
1

您将无法使用异步的、基于事件的代码。

避免手动重构代码的实用变通方法？

您可以尝试将关键字带入awaitjs 的 javascript-to-javascript 编译器。它应该自动将您的代码转换为异步版本。

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

于 2014-07-11T12:19:26.607 回答
0

<dialog>在 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);

    });

然后从“x”按钮将click事件附加到ID：dialog-close

    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，如果您以这种方式使用它，如果站点上的安全性阻止将外部站点引入您自己的站点，则它可能不起作用。例如，谷歌禁止在他们的网站上使用这种方式。

这应该是一个跨平台示例 - 我已经在 IE 11 中对其进行了测试。“Polyfill”，我看到其他人说这是另一种方法，它不是，也不能在 IE 中工作，因为它依赖于Promise， IE 不支持，如本页底部所示： https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

于 2015-10-19T15:37:06.523 回答