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

Custom alert/popup window and holding JS engine

本文关键字：JS 引擎 窗口 自定义      更新时间：2023-09-26

我想设计一个自定义的警报/弹出窗口，以提供所需的外观。我在这里尝试了对话框示例。现在，我希望在显示自定义弹出窗口后，在我对弹出窗口采取一些操作之前，我的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>

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

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

演示

可以建议您使用sweet alert。它们非常容易使用，在前端看起来非常棒：

1）下载甜蜜的Alert zip并提取它。

2）检查dist文件夹，并将.min.js和css文件移动到您的项目中。3）在这里的文档中使用它们作为定义

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

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

希望对有所帮助

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

相关文章：