的 DEMO

Question

我想设计一个自定义警报/弹出窗口，以提供所需的外观。我尝试了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>

Answer 1

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

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

的 DEMO

Answer 2

可以建议你使用甜蜜的警报，真的很容易使用，并在前端有点神话般的看看：

1）下载甜蜜的Alert zip并将其解压缩。

2）检查dist文件夹并将.min.js和css文件移动到您的项目中。 3）按照文档here

中的定义使用它们

4）对你来说，这将是一种

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

希望它有所帮助

注意：别忘了先加载css文件和JS文件

自定义警报/弹出窗口和持有JS引擎

2 个答案:

的 DEMO