2010-12-07 31 views
4

jQueryを使用してdivを表示しているとしますが、残りのウィンドウ(そのdivを除くすべて)にはユーザーがアクセスできないようにします - すべてのコントロールは無効になり、ユーザーはその特別なdivのコントロール?jQueryで入力をブロックするにはどうすればよいですか?

+0

ここにデモがありますhttp://jquery.malsup.com/block/#demos – kobe

+0

私はシンプルな修正がzインデックスになると言っています/// – kobe

+0

@everyone - すべての答えをありがとう、すべてのサンプルは素晴らしいです。だから皆に+1を与える! – dexter

答えて

4

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

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

毎時新しいことを学んでください:) – RobertPitt

+0

私はオブジェクトがこのプロパティまたはメソッドをサポートしていない取得します。 – dexter

+1

@Max、[jQuery UI](http://jqueryui.com/home)フレームワークは、([その他](http://jqueryui.com/demos/)の中の) 'dialog()'メソッドを定義しています。 –

1

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

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

2

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

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

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

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

1

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

CSSの位置がfixedで、widthheightwindow.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のクラスを持っている必要があります。

+0

ええ、あなたは正しいです、私もあまりにも迅速かつ簡単に述べたことthats。 – kobe

+0

これは、ユーザーがタブの後ろにタブを移動してキーボードからコントロールを使用しないようにしています。 – mkoryak

+0

@mkoryak、新しいことを教えてくれてありがとう、ダイアログやブロックUIを使う方がいいですよ。 – kobe

関連する問題