さらにもう1つの確認のための交換

はい、私はSOの高低を検索し、SimpleModal、jQuery.confirmなどのようなものでこの問題に対するいくつかの素晴らしい解決策を何度も解決しました。さらにもう1つの確認のための交換

問題は、この低レベルデバイス用にJSフレームワークを利用できないように開発しており、このモーダル確認を既存のJSに差し替える必要があります。

バリデーション、いくつかの入力を1つの変数に連結するなどのいくつかのことを行う、私が自由に編集できる（書き換えない）既存のスクリプトがあります。

スクリプトが書き込まれました：

は、彼らが事前格納するためにこれらの変数を使用するかどうかを確認するために、ユーザーに確認を提示に応じ
いくつかのセッション変数を取り、彼らに新しい変数名を割り当て、フォーマットページ上のフォーム
入力を検証する準備ができている関数をいくつか取得します。
「確認」はキャンセルOKかが提供されるまでスクリプトが一時停止と同じような場所にいたときに、他のものは、提供のような放棄のシナリオは、今

とりわけ、すべてが良かったです。私はこのモードを模倣したいというページ上のモーダルを提示しています。これを行うと考えることができる唯一の方法は、確認事項を通過する行の依存を取り除き、ユーザーが対話するまでスクリプトを実行しないことですモーダル

はい、いいえの可能性のそれぞれについて、聞いているかどうかのシナリオで "何か"を取る方法を考えている人はいますか？

申し訳ありませんこれは混乱している場合...私のブライアンは、すべての時点でもブレンドされています。

出典

2011-01-19 rob - not a robber

これは古典的な解決策です。ユーザーがモーダルとのやり取りを終了したら、コールバックを使用します。 – Hemlock

「ブライアン」のための意図的なものではなく、+1。 ;-D – stealthyninja

@sthealthyninja：私はブライアンにとって非常に多くの "quesitons"を持っています、私の脳はちょうどそれを処理できません。 –

私が知る限り、ブラウザ固有のalert（）やconfirm（）などのスクリプトを停止する方法はありません。

たとえば、ダイアログが表示されている間にクリックやその他の入力を防ぐために、透明なDIVをウィンドウ全体に置くことで、この動作を模擬しようとします。

キーボード入力はこのカーテンの後ろにある入力フィールドやボタンを有効にすることができるので、これは私が経験したように非常に難しいです。キーボードショートカットまたはフィールドタブイングなどがあります。 1つの解決策は、アクティブな要素を手動で無効にすることです。これはほとんどの場合、私にとってはうまく機能します。

オプションが選択されたときに実行する1つ以上の関数がこの「モック」ダイアログに渡されます。ダイアログがオープンしている間に、競合する関数呼び出しを停止するという責任は、開発者にあります。実行時に保存された選択機能（未定義）の可用性に関するエラーがまだある。このコードでは

<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

アップデートされたバージョン：fixedAction未定義、IE互換性の追加。 confirm()がデフォルトでブロックされているため、これを使用する主な理由の1つがInternet Explorerです。

<!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

さらにもう1つの確認のための交換

答えて

関連する問題