如何在 javascript 中编写自己的确认对话框？答案

【问题标题】：How do I write my own confirm dialog in javascript?如何在 javascript 中编写自己的确认对话框？
【发布时间】：2010-09-16 08:45:32
【问题描述】：

我想写一些类似于javascript中的confirm()的东西，但我想自己写，这样我就可以给对话框设置皮肤了。在思考我将如何基本上强制 javascript 线程等到用户响应然后返回 true 或 false 时遇到问题。

【问题讨论】：

标签： javascript modal-dialog

【解决方案1】：

如果我是你，我会看看流行的 javascript 库之一。大多数都包含某种模式对话框。

我为 JQuery 找到的一对是 jqModal 和 SimpleModal。

当您构建模态对话框时，您必须将事件绑定到按钮，因此您可以执行以下操作：

function askUserYesOrNo() {
  var myDialog = $('<div class="mydialog"><p>Yes or No?</p><input type="button" id="yes" value="Yes"/><input type="button" id="no" value="No"/></div>');
  $("#yes").click(handleYes);
  $("#no").click(handleNo);
  myDialog.modal(); //This would have to be replaced by whatever syntax the modal framework uses
}

function handleYes() {
  //handle yes...
}

function handleNo() {
  //handle no...
}

【讨论】：

所以这里的要点是我不能再写像 "if(confirm("text")) { //handleYes } else { //handle No } //之后的其他东西？我'希望能够像使用确认一样使用它。
两个链接的插件都有覆盖confirm()的例子
AFAIK，javascript 线程与 UI 线程同步运行。如果您曾经遇到过长时间运行的脚本会冻结您的浏览器，那么您已经看到了这一点。例如，在 Chrome 中可能不是这种情况，但在大多数使用的浏览器中都是如此。

【解决方案2】：

您确实想为此使用一个框架，因为您在尝试自己构建它时会遇到许多奇怪的跨浏览器问题。

我使用jqModal 取得了不错的效果，这是一个用于 jQuery 框架的插件，可让您定义模态对话框，但这绝不是唯一的选择；尝试谷歌搜索 jquery modal 或 yui modal 寻找一些替代方案。

【讨论】：

【解决方案3】：

对于Mootools，有moo.rd's Custom.Confirm和Windoo.Confirm供大家参考。

【讨论】：

【解决方案4】：

您可以使用 window.showModalDialog (mozilla)，但它是 Internet Explorer 引入的非标准功能。现在 Firefox 3 和 Safari 也支持它（我不确定哪个版本，但至少 3.1 和更高版本，但不是 iPhone）。

【讨论】：

【解决方案5】：

一个简单的 YUI 模态灯箱 (example)：

http://bravo9.com/journal/a-simple-lightbox-modal-dialog-with-yui-c5b048f5-b278-46d1-9a7e-0d3035094f52/

【讨论】：