1

他のページ要素に関連する特定の場所でフォームを開きたいプロジェクトがあります。また、フォームが開いている間、非フォーム ページ アイテムをブロックしたいと思います。blockUI をいじってみましたが、ブロックされていない DIV はブラウザ ウィンドウに対してしか配置できないようです。これはモーダルには最適ですが、私の状況には適していません。

例を挙げて明確にできるかどうか見てみましょう。次のようなコードがあるとします。

<div style="position:relative; height:400px; width:600px;">
  <p>This content should be blocked, as well as anything not in the next div</p>
  <div id="non-blocked-content" style="position:absolute; top:40px; left: 200px; width:300px; height:200px;">
    <form>
       <label>This should not be blocked</label>
       <input type="text" name="name">          
    </form>
  </div>
</div>

フォームを表示して使用できるようにしたいのですが、残りのページ コンテンツはブロックする必要があります。これをやってのけるためのjavascript（できればjQuery）パッケージを知っている人はいますか？

ありがとう！- ブレット

4

4 に答える 4

1

画面に一致するサイズの div を作成し、絶対に配置し、998 または何かの z-index を指定してから、ブロックを解除したい項目に 999 の z-index を指定します。

簡単なjsfiddleの例

于 2011-09-17T22:39:19.460 に答える
0

提供されたソリューションは気に入りましたが、まったく適切なものはありませんでした。Paul のコードは、要素の幅と高さをウィンドウの幅と高さに設定しました。大きなページがあり、下にスクロールしている場合、画面のブロックされた部分は、表示している領域をカバーしません。

私が使用したコードは次のようになります。

$('<div/>').css({
    'width':$('body').width(),
    'height' :$('body').height()
}).appendTo('body').attr('id', 'overlay');

..そしてオーバーレイは次のようにスタイルされています...

#overlay {
  position:absolute;
  top:0;
  left:0;
  z-index:998;
  background:url('/images/global/pixel-black-opacity-70-percent.png');
}
于 2011-09-24T23:52:01.333 に答える
0

blockUI を使用して、目的の要素に対して目的のフォームを配置してみませんか? jQuery を使用すると、ドキュメントに対するすべての要素の位置を簡単に取得できます。

于 2011-09-17T22:36:44.130 に答える
0

問題の解決策: ここを見てください: jquery を使用してモーダル機能を持​​つすべてのページ要素を無効にする

ただし、フォームの特定の部分のみに対するモーダル動作は、ユーザーにとってかなり混乱を招く可能性があることに注意してください。モーダル動作は通常、他のすべての上に表示されるダイアログを介して行われるのはそのためです。

私は個人的にblockUIを効果的に使用しています。それは宣伝どおりに機能します。:-)

于 2011-09-17T22:40:32.537 に答える