6

ボタンクリックイベントでWebページ全体を無効/「灰色の画面」にする必要があるJSP/HTMLでWebページを開発しているため、エンドユーザーは無効になるまでWebページの他の要素にアクセスできません。

どうすればこれを達成できますか?

4

5 に答える 5

17

CSS:

#cover {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   opacity: 0.80;
   background: #aaa;
   z-index: 10;
   display: none;
}

HTML :

<body>
<div id="wrap">
 // your normal contents here
</div>
<div id="cover"> </div>
</body>

jquery:

//trigger on whatever event required.
$("#cover").fadeIn(100);
alert("something");
$("#cover").fadeOut(100); //after done.
于 2012-05-07T05:53:13.870 に答える
7

jQuery BlockUIプラグインを使用できます。

簡単です。

于 2012-05-07T05:58:25.120 に答える
4

これを達成する方法はいくつかあります..しかし、私が遭遇した最も簡単な方法は、divタグを使用してページを覆い、イベントが完了したときにそれを削除することです

$('body').append('<div id="over" style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');

これにより、ボディ全体にdivタグが追加されます。関数の最後にこれを含めます

$("#over").remove();
于 2013-11-04T11:09:46.053 に答える
2

JQuery を使用でき、灰色の領域の上にユーザー入力が必要な場合は、JQUEry UI Dialogを試して、モーダルとして設定してください。

于 2012-05-07T05:51:45.763 に答える
2

これの基本的なテクニックは、すべての上に 100% の幅と高さの div を追加することです。

$('body').append('<div class="cover"/>').css({
    position: 'absolute',
    height: '100%',
    width: '100%',
    zIndex: '999'
});

次に、モーダル ウィンドウを作成しますz-index: 1000。

于 2012-05-07T05:53:57.067 に答える