閉じることができないJavaScriptのモーダルダイアログボックス

Question

エンティティの名前をクリックしてフォームを更新できるページがあります。名前のリストと、onClickからAJAXで更新する他のすべてのフィールド（住所、年齢、性別など）を持つフォームを考えてみましょう。 AJAX呼び出しがデータを返すまでユーザーの操作を妨げるモーダルダイアログ（「しばらくお待ちください」）を作成するにはどうすればよいですか？ユーザーが「X」または「閉じる」ボタンをクリックできないようにしたい。彼または彼女は待たなければならない！

Answer 1

BlockUIプラグインをご覧ください。

ブロッキングは、ページまたはその要素の上にオーバーレイを追加することによってページまたは特定の要素と対話することができます。あなたはメッセージを定義することができ、表情をカスタマイズするためのたくさんのオプションが付属しています&。

あなたは、例えば、AJAX要求がで実行されているページブロックすることができ

：

$(document).ajaxStart(function() { 
    $.blockUI({ 
     message: '<h1>Just a moment...</h1>' 
    }); 
} 

$(document).ajaxStop(function() { $.unblockUI(); } 

Answer 2

var d = document.createElement('div'); 
d.style.position = "fixed"; 
d.style.top = d.style.left = d.style.right = d.style.bottom = "0px"; 
document.body.appendChild(d); 

基本的なマスクです。その後、「しばらくお待ちください」のようなものを追加できます。

Answer 3

ページの内容全体にDIVを配置する必要があります。通常、これはユーザーが待機する必要があることを示すために半透明です。場合によっては、オーバーレイに「ローディング」スピナーがあります。