另一个确认替换问题

是的，我已经搜索了高和低的SO，并看到一些伟大的解决方案，这个问题一次又一次地解决像SimpleModal，jQuery.confirm和类似的东西。另一个确认替换问题

问题是，我正在开发这个低级别的设备，不允许使用JS框架，而且我不得不将这种模式确认用于现有的JS。

有一个现有的脚本，我可以随意编辑（但不能重写），它会执行一些操作，例如验证，将几个输入连接到单个变量等等。

剧本是写：

采取一些会话变量，并指定新的变量名给他们，并相应格式
呈现给用户的确认，看看他们是否要使用这些变量预填充页面上的表格
获取一些准备好验证输入的函数。
其他的东西，比如提供一个被遗弃的情况下，除其他事项外

现在，一切都很好，当“确认”是地方作为脚本将暂停，直到确定或取消提供了依据。我现在在页面上展示一种模式，我想要嘲笑这种行为，我认为这样做的唯一方法是消除对通过确认事件的线路的依赖，并且不会运行脚本，直到用户与模态。

有没有人有一个想法如何采取措施，并将其“包装”在if或else场景中的每个YES或NO可能性？

对不起，如果这是混乱......我的布莱恩现在也混在一起了。

来源

2011-01-19 rob - not a robber

这是一个经典的解决方案，当用户完成与模态的交互时使用回调。 – Hemlock 2011-01-19 19:49:06

据我所知，迄今为止，没有办法停止浏览器特定的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>

在这段代码中还有关于在执行时存储的选择功能（不确定）的可用性错误。函数变量在闭包中不再可用。如果有人有这方面的解决方案，欢迎您加入。

希望接近你需要知道的东西。

来源

2011-01-21 09:42:44 elfwyn

更新版本：固定choiceAction未定义，添加IE的兼容性。 Internet Explorer是使用此的主要原因，因为默认情况下，confirm()现在被阻止。

<!doctype html> 
<html><head> 
<title>Modal Dialog example</title> 

<script type="text/javascript"><!-- //http://stackoverflow.com/questions/4739740/yet-another-confirm-replacement-quesiton 

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 = '#000'; 
      this._panel.style.opacity = '0.3'; 
      this._panel.style.filter = 'alpha(opacity=30)'; //ie7+ 
      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 = '16px'; 
      this._modalDialog.style.top = '35%'; 
      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.style.padding = '0 10px 10px 0'; 
      dialogText.style.fontFamily = 'Arial,sans-serif'; 
      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.style.marginRight = '8px'; 
       choiceButton.name = i; 
       choiceButton.innerHTML = this._choices[i].label; 
       var clickAction = function() { 
        _this.close(); 
        if(_this._choices[this.name].action) _this._choices[this.name].action(); 
       }; 
       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(){ alert('submitted') }));"> 
     <!-- document.forms['identity'].submit(); --> 
    </form> 
</body> 
</html>

来源

2012-09-01 16:18:30

另一个确认替换问题

回答

相关问题