【问题标题】：Custom alert/popup window and holding JS engine自定义警报/弹出窗口并持有 JS 引擎
【发布时间】：2016-08-31 14:49:05
【问题描述】：

我想设计一个自定义警报/弹出窗口以提供所需的外观和感觉。我尝试了来自here 的对话框示例。现在，我希望在显示自定义弹出窗口后，我的 JS 引擎不应该继续进行，直到我对弹出窗口采取一些操作。这很像 JS 提供的构建警报/确认弹出窗口。

在我的示例中，alert('2') 将在弹出窗口呈现后立即执行。我希望 alert('2') 只有在我单击弹出窗口上的“取消”或“删除”并且与它们相关联的 JS 代码被执行后才能执行。

我知道这是可能的，因为DHTMLX 框架已经完成了它，它提供了自定义弹出窗口，并且在您对该弹出窗口执行一些操作之前，下一个 JS 代码将不会执行。

以下是最小的可重现示例。

<html>
    <head>
        <meta name='viewport' content='minimum-scale=1.0, width=device-width, maximum-scale=1.0, user-scalable=no' />

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile.structure-1.2.0.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>

        <script>
           function testPopup(){
                alert('1');
                $("#popupDialog").popup("open");
                alert('2');
           }
        </script>
    </head>

    <body>

        <input type="button" onclick="testPopup()" value="testPopup"/>

<div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" data-theme="a">
    <h1>Delete Page?</h1>
    </div>
    <div role="main" class="ui-content">
        <h3 class="ui-title">Are you sure you want to delete this page?</h3>
    <p>This action cannot be undone.</p>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back">Cancel</a>
        <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b" data-rel="back" data-transition="flow">Delete</a>
    </div>
</div>

    </body>
</html>

【问题讨论】：

JavaScript 无法实现。
你能解决你的问题吗？我可能有一个想法可以提供帮助，谢谢。
还有什么时候应该调用 alert('2')？在你对弹出窗口做了什么之后？
@Chris I hv 给出了完整的工作示例，您可以在本地盒子中进行测试，或者如果您愿意，可以在 jsfiddle 中进行测试。是的，alert('2') 应该在用户使用后调用弹出操作..
@epascarello 对我来说，从警报示例看来 dhtmlx 提供了这样的功能，因为他们的警报没有注册任何回调，但是我不能确定，因为我没有使用过这个框架..

标签： javascript jquery jquery-ui jquery-mobile popup

【解决方案1】：

您可以使用弹出窗口小部件 afterclose 事件来触发应在弹出窗口关闭后运行的代码：

function testPopup(){
  alert('1');
  $("#popupDialog").popup("open").on( "popupafterclose", function( event, ui ) {
    alert('2');
  });
}

DEMO

【讨论】：

谢谢，很好的建议，它很像回调函数，我知道，但我不能这样做，因为很多原因，最重要的是，我在使用 JS 的内置代码时完成了很多编码alert，现在我想显示一个自定义警报，如果我按照你的方式做，那么我会接触很多代码.. 我想找到一种方法，我可以用我的代码替换 alert显示自定义弹出窗口，我可以确定在用户对弹出窗口采取一些操作之前，不会执行任何进一步的操作..
@pjj: stackoverflow.com/questions/13635297/…

【解决方案2】：

可以建议你使用sweet alert，它们真的很容易使用并且前端看起来很棒：

1) 下载 Sweet Alert 压缩包并解压。

2) 检查 dist 文件夹并将 .min.js 和 css 文件移动到您的项目中。 3 ) 按照文档here中的定义使用它们

4) 以你为例，这将是一种

        <script>
          $("#popupDialog").click(function(){
             swal("congrats your popup work fine ");
          })
        </script>

希望对你有所帮助

注意：不要忘记先加载css文件和JS文件

【讨论】：