自定义警报/弹出窗口并持有 JS 引擎
Posted
技术标签:
【中文标题】自定义警报/弹出窗口并持有 JS 引擎【英文标题】：Custom alert/popup window and holding JS engine 【发布时间】：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 提供了这样的功能，因为他们的警报没有注册任何回调，但是我不能确定，因为我没有使用过这个框架..
【参考方案1】：
您可以使用弹出窗口小部件 afterclose 事件来触发应在弹出窗口关闭后运行的代码：
function testPopup()
alert('1');
$("#popupDialog").popup("open").on( "popupafterclose", function( event, ui )
alert('2');
);
DEMO
【讨论】：
谢谢，很好的建议，它很像回调函数，我知道，但我不能这样做，因为很多原因，最重要的是，我在使用 JS 的内置代码时完成了很多编码alert，现在我想显示一个自定义警报，如果我按照你的方式做，那么我会接触很多代码.. 我想找到一种方法，我可以用我的代码替换 alert显示自定义弹出窗口，我可以确定在用户对弹出窗口采取一些操作之前，不会执行任何进一步的操作..
@pjj: ***.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文件
【讨论】：
以上是关于自定义警报/弹出窗口并持有 JS 引擎的主要内容，如果未能解决你的问题，请参考以下文章
关闭一个自定义弹出窗口UIViewController并立即显示另一个自定义弹出窗口UIViewController -SWIFT
如何在删除时在甜蜜警报弹出窗口中进行 axios 调用并在弹出窗口内的下拉列表中显示数据？
在 Swift 中创建自定义 UIView 并显示为弹出窗口