confirm（）在JavaScript中是如何工作的

我在考虑JavaScript中的本机函数今天是如何工作的，我可以跨越

alert（）

，我认为它必须使用

createElement（）

，或者创建一个元素并使用

innerHTML

，但我无法找出创建一个弹出元素和两个按钮所需的完整代码，然后基于单击返回

true

或

false

。
乔维斯说：

通常JS是异步的；为什么警报是特别的？它如何以及为什么以与我自己的脚本不同的方式创建UI元素

以下是我计算出的代码：

function confirm(message) {
    message = message.replace(/"\n"/g, "<br />")
    createElement();
//The create Element is very complicated to create the text box including message. . .
//These two functions are tied to the button's onclick's.
    function clickOkay() {
        valueToReturn = true
        return true;
    }
    function clickCancel() {
        valueToReturn = true
        return false;
    }
    //here, the user hits the button, and sets valueToReturn
    return valueToReturn;
}

功能确认（消息）{
message=message.replace（/“\n”/g，“
”）
createElement（）；
//创建元素非常复杂，无法创建包含消息的文本框。
//这两个功能与按钮的onclick关联。
函数clickOkay（）{
valueToReturn=true
返回true；
}
函数clickCancel（）{
valueToReturn=true
返回false；
}
//在这里，用户点击按钮，将value设置为return
返回值返回；
}

---

但是我不明白它是如何停止后台脚本的（如果可以访问的话），或者createElement（）是如何工作的（但这是另一个问题）

警报

，

确认

，和

提示

都是由浏览器实现的DOM API。它们不会创建DOM元素来表示它们，并且它们的功能不能用JavaScript精确地重新创建，因为您不能强制JavaScript引擎等待用户单击其中一个按钮。您只能通过要求包含您创建的对话框结果的回调来实现

function customConfirm(message, callback) {
    message = message.replace(/"\n"/g, "<br />")
    createElement();
    //The create Element is very complicated to create the text box including message. . .
    function clickOkay() {
        callback(true);
    }
    function clickCancel() {
        callback(false);
    }
}
customConfirm("Hello World!", function (result) {
    console.log(result);
});

函数customConfirm（消息，回调）{
message=message.replace（/“\n”/g，“
”）
createElement（）；
//创建元素非常复杂，无法创建包含消息的文本框。
函数clickOkay（）{
回调（true）；
}
函数clickCancel（）{
回调（假）；
}
}
customConfirm（“Hello World！”，函数（结果）{
控制台日志（结果）；
});

确认（）函数是每个浏览器为您提供的本机函数。 它不是使用javascript创建的。但是，如果你想重现这种行为，你可以采取类似的方式：

函数myConfirm（文本，cb）{
//我们以后需要这个
var body=document.getElementsByTagName（'body'）[0]；
//首先，我们创建一个保存警报的div，并给它一个类来使用css设置样式
var overlay=document.createElement（'div'）；
overlay.className='myConfirm'；
//盒子里装着内容
var-box=document.createElement（'div'）；
var p=document.createElement（'p'）；
p、 appendChild（document.createTextNode（text））；
//我们将文本附加到div
框。儿童（p）；
//创建“是”和“否”按钮
var yesButton=document.createElement（'button'）；
var noButton=document.createElement（'button'）；
//向按钮添加文本和事件
appendChild（document.createTextNode（'Yes'）；
yesButton.addEventListener（'click'，function（）{cb（true）；body.removeChild（overlay）；}，false）；
appendChild（document.createTextNode（'No'）；
addEventListener（'click'，function（）{cb（false）；body.removeChild（overlay）；}，false）；
//将按钮附加到框中
框。追加子项（是按钮）；
框。追加子项（noButton）；
//将该框附加到覆盖中
覆盖。追加子项（框）
//将覆盖框插入dom中
子体（叠加）；
}
myConfirm（'Hello there！'，函数（value）{console.log（value）；}）
.myConfirm{
位置：固定；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,0.05）；
}
.myConfirm>div{
宽度：200px；
利润率：10%自动；
填充：10px 20px；
边框：1px纯黑；
背景：#ccc；
}
.myConfirm分区p{
文本对齐：居中；
}
.myConfirm div按钮{
宽度：40%；
利润率：0.5%；
}
confirm（）
是本机函数。它不是用JavaScript实现的。
while（true）{/*但这会使整个页面无响应，并且会提示终止脚本*/}
-从方法的角度来看，浏览器JavaScript wrt UI中的所有内容都必须基于回调，例如“不阻止UI”。看看现有的“模态对话框”如何使用回调（和覆盖HTML元素）；为什么
alert
特别？它如何以及为什么以与我自己的脚本不同的方式创建UI元素？。。但是
alert（）
在JavaScript看来并不特殊。在返回之前，不会再出现JS。@wyatt，一切都在边界处解释：synchronous是synchronous。警报/确认可以工作，因为它们的UI处理在JavaScript执行上下文之外进行。在实现中，这样的模式对话框可能包括消息分派周围的while循环（或者信号量上的while循环，UI位于不同的线程上）。[旧的FF版本实际上存在一个“有趣的问题”，它允许在发出
警报时发生一些异步回调，您必须将两个单击功能绑定到按钮的单击事件。您可以添加一个将两个单击功能绑定到按钮的单击事件的示例吗？@SamC我不记得该评论的上下文。介意扩大一点吗？