jQueryで入力をブロックするにはどうすればよいですか？

Question

jQueryを使用してdivを表示しているとしますが、残りのウィンドウ（そのdivを除くすべて）にはユーザーがアクセスできないようにします - すべてのコントロールは無効になり、ユーザーはその特別なdivのコントロール？

Answer 1

あなたの<div>要素からmodal dialogを構築することができます：

$("#yourDivID").dialog({ modal: true }); 

Answer 2

は、「jQueryのライトボックス」の検索を行うと、あなたは後にしているものを見つける、または別の回答で述べたようにjqueryのモーダルダイアログを使用します。

ライトボックスは、ページが不透明マスクでオーバーレイされているため、コントロールが無効/アクセス不可能であることを明確に示しています。簡単な修正のための

Answer 3

jqueryのボックUIプラグインを使用してください

http://jquery.malsup.com/block/

ポップアップのあなたのz-indexが背後にあるすべての要素よりも大きい場合、あなたは

ギブ後ろのアイテムに触れることができませんZインデックス1000年のようなまたはそう

Answer 4

むしろ非常に単純な何かのために本格的なプラグインを使用するよりも：

CSSの位置がfixedで、widthとheightがwindow.innerHeight & window.innerWidthのプロパティにそれぞれ等しい第2のdivを使用します。 z-indexを大きいものに設定しますが、表示されるモデルダイアログのz-indexより小さく設定してください。

$('<div />').css({ 
    position: 'fixed', 
    left: 0, 
    top: 0, 
    width: window.innerWidth, 
    height: window.innerHeight, 
    'z-index': 1000 
}); 

コメントに記載されているとおり、これはユーザーが非表示のフィールドに移動するのを止めるものではありません。それを行うには、あなたがタブプレスをキャプチャするイベントをバインドし、それを取り消すことができます。

$(document).bind('keydown', function (event) { 
    if (event.which === 9 && !$(event.target).closest('.model').length) { 
     event.preventDefault(); 
    } 
}); 

はあなたの意志でイベントハンドラを追加/削除する機能を与えるために、そうのようにそれを行うことが容易になります：

function stopTab(event) { 
    if (event.which === 9 && !$(event.target).closest('.model').length) { 
     event.preventDefault(); 
    } 
} 

$(document).bind('keydown', stopTab); // to add 
$(document).unbind('keydown', stopTab); // to remove 

あなたのモーダルダイアログが動作（または単にセレクタを変更）するために、このためにmodalのクラスを持っている必要があります。