9

オーバーレイ div を次のように作成しました。

position: absolute; top: 0; left: 0; widht: 100%; height: 100%;

基本的に、このオーバーレイ div でページ全体をカバーしたいと考えています。そして、それは私が必要とすることを行いますが、基になる div をクリックできないようにする必要もあります。それらは確かにクリックできませんが、FF、Safari、および Chrome でのみです。IE と Opera では、下にあるボタンをクリックすることができます。

この「クリックできない基本的な動作」をどのように達成できるかについて、誰かが考えを持っていますか?

4

6 に答える 6

20 
.class {pointer-events: none;}
于 2014-01-09T11:49:55.673 に答える
1

jQueryのようなものを使用している場合は、次のようなことができます

$("a:not(.overlay)").click(function(e) { e.preventDefault(); });
$("input:not(.overlay)").click(function(e) { e.attr("disabled", "disabled"); });

オーバーレイ内のすべて (リンク、ボタンなど) にオーバーレイ クラスを指定すると、ページ上の他のすべてが効果的に無効になります。

于 2009-12-12T21:37:52.293 に答える
1

オーバーレイ div の onclick ハンドラーを追加します。

于 2009-12-12T21:23:28.543 に答える
1

これは、JavaScript を使用して簡単に実行できます。

  • 高い z-index でページ全体をマスキングする div を作成します
  • マスクがすべてのクリックをキャッチするようにする
  • マスクを外すと、ページは再びクリック可能になります。

もちろん、このアプローチは body だけでなく、すべての dom 要素で使用できます。

var mask = $('<div></div>')
  .css({
    position: 'absolute',
    width: '100%',
    height: '100%',
    top: 0,
    left: 0,
    'z-index': 10000
  })
  .appendTo(document.body)
  .click(function(event){
    event.preventDefault();
    return false;
   })

ここでの作業サンプル: http://jsfiddle.net/GTPW3/3/

于 2013-01-07T12:07:44.987 に答える
1

また、新しい div が他のすべての上にあることを確認するために z-index を使用する必要があります。この属性がないと、どちらが一番上にあり、onclick を受け取るかという点で、ブラウザーに翻弄されます。

また、入力タイプの選択で z-index が無視されるという既知の IE (古いバージョン) のバグにも注意してください。

于 2009-12-12T21:33:41.350 に答える
0

オーバーレイ CSS には次のものがあります。

z-index: 10000;

それの世話をします。

于 2012-09-20T05:43:35.560 に答える