是的，我在 Stack Overflow 上到处搜索，看到了一些很好的解决方案来解决这个问题，这些解决方案已经通过 SimpleModal、jQuery.confirm 等解决了一次又一次。
问题是，我正在为这种低级设备进行开发，该设备不允许使用 JS 框架，并且我必须将此模式确认硬塞到现有的 JS 中。
有一个现有脚本，我可以自由编辑(但不能重写)，它可以执行一些操作，例如验证、将一些输入连接到单个变量等。
脚本被写入:
- 获取一些 session 变量并为其分配新的变量名称并相应地设置格式
- 向用户显示确认信息，看看他们是否要使用这些变量来预填充页面上的表单
- 准备一些函数来验证输入。
- 其他内容，例如提供放弃场景等
现在，当“确认”到位时，一切都很好，因为脚本将暂停，直到提供“确定”或“取消”。我现在在页面上呈现一个模式，我想模拟这种行为，我能想到的唯一方法是消除对经过确认的行的依赖，并且在用户与用户交互之前不运行脚本模态。
有人知道如何将现有的内容“包装”在“监听”if/else 场景中，以应对每种"is"或“否”的可能性吗？
抱歉，如果这很困惑……我的大脑现在也很困惑。
最佳答案
据我所知，到目前为止，还没有办法像浏览器特定的alert()或confirm()对话框那样停止脚本。
例如，像 dojo 这样的框架尝试通过在整个窗口上放置一个透明的 DIV 来模拟此行为，以防止在对话框显示时单击或其他输入。
正如我所经历的，这非常棘手，因为键盘输入可能能够激活此窗帘后面的输入字段或按钮。例如键盘快捷键或字段选项卡。 一种解决方案是手动禁用事件元素，这在大多数情况下对我来说效果很好。
一个或多个函数被传递到此“模拟”对话框，以在选择选项时执行。 特别是对于 ajax 后台事件，开发人员有责任在对话框打开时停止冲突的函数调用。
这是我想出的一个例子:
<html>
<head>
<title>Modal Dialog example</title>
<script type="text/javascript">
<!--
var ModalDialog = function(text,choices){
this._text = text;
this._choices = choices;
this._panel = null;
this._modalDialog = null;
this._disableElements = function(tag){
var elements = document.getElementsByTagName(tag);
for(i=0; i < elements.length; i++){
elements[i].disabled = true;
}
};
this._enableElements = function(tag){
var elements = document.getElementsByTagName(tag);
for(i=0; i < elements.length; i++){
elements[i].disabled = false;
}
};
this._disableBackground = function(){
if(this._panel){
this._panel.style.display = 'block';
}
else{
// lower the curtain
this._panel = document.createElement('div');
this._panel.style.position = 'fixed';
this._panel.style.top = 0;
this._panel.style.left = 0;
this._panel.style.backgroundColor = 'gray';
this._panel.style.opacity = '0.2';
this._panel.style.zIndex = 99; // make sure the curtain is in front existing Elements
this._panel.style.width = '100%';
this._panel.style.height = '100%';
document.body.appendChild(this._panel);
// Disable active Elements behind the curtain
this._disableElements('INPUT');
this._disableElements('BUTTON');
this._disableElements('SELECT');
this._disableElements('TEXTAREA');
}
};
this.close = function(){
// Hide Curtain
this._panel.style.display = 'none';
// Hide Dialog for later reuse - could also be removed completely
this._modalDialog.style.display = 'none';
// reactivate disabled Elements
this._enableElements('INPUT');
this._enableElements('BUTTON');
this._enableElements('SELECT');
this._enableElements('TEXTAREA');
};
this.open = function(){
var _this = this;
this._disableBackground();
if(this._modalDialog){
this._modalDialog.style.display = 'block';
}
else{
// create the Dialog
this._modalDialog = document.createElement('div');
this._modalDialog.style.position = 'absolute';
this._modalDialog.style.backgroundColor = 'white';
this._modalDialog.style.border = '1px solid black';
this._modalDialog.style.padding = '10px';
this._modalDialog.style.top = '40%';
this._modalDialog.style.left = '30%';
this._modalDialog.style.zIndex = 100; // make sure the Dialog is in front of the curtain
var dialogText = document.createElement('div');
dialogText.appendChild(document.createTextNode(this._text));
// add Choice Buttons to the Dialog
var dialogChoices = document.createElement('div');
for(i = 0; i < this._choices.length; i++){
var choiceButton = document.createElement('button');
choiceButton.innerHTML = this._choices[i].label;
var choiceAction = _this._choices[i].action
var clickAction = function(){
_this.close();
if(choiceAction)choiceAction();
};
choiceButton.onclick = clickAction;
dialogChoices.appendChild(choiceButton);
}
this._modalDialog.appendChild(dialogText);
this._modalDialog.appendChild(dialogChoices);
document.body.appendChild(this._modalDialog);
}
};
};
var myConfirm = function(text,okAction){
var dialog = new ModalDialog(text,[
{
label:'ok',
action : function(){
console.log('ok')
okAction();
}
},
{
label:'cancel'
}
]);
dialog.open();
};
-->
</script>
</head>
<body>
<form name="identity" action="saveIdentity.do">
<label>Firstname</label><input name="name" type="text"><br>
<label>Lastname</label><input name="name" type="text"><br>
<input type="button"
value="submit"
onclick="if(myConfirm('Do you really want to Commit?',function(){ document.forms['identity'].submit();}));">
</form>
</body>
</html>
在此代码中，仍然存在关于执行时存储的选择函数(未定义)可用性的错误。函数变量在闭包中不再可用。如果有人对此有解决方案，欢迎添加。
希望这接近您需要了解的内容。
关于javascript - 在 JavaScript 中确认替换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4739740/