1

クリック時にオーバーレイを有効にし、divクリックすると無効にします。

現在、私のコードは次のようになっています。たぶん、.on .offが不適切に使用されていますか？

$(function() {
    $("#sec_a_div").on("click","#wrapper_overlay");


    var docHeight = $(document).height();

    $("#wrapper_overlay")
      .height(docHeight)
      .css({
         'opacity' : 0.4,
         'position': 'absolute',
         'top': 0,
         'left': 0,
         'background-color': '#666666',
         'width': '100%',
         'z-index': 100
      })

    $.off("click","#wrapper_overlay");

});
4

3 に答える 3

2

とを使用show()しhide()て、オーバーレイを「有効」および「無効」にすることができます。

$("#sec_a_div").on("click", function() {
    $("#wrapper_overlay").show();
});

$("#wrapper_overlay")
  .height($(document).height())
  .css({
     "opacity": 0.4,
     "position": "absolute",
     "top": 0,
     "left": 0,
     "background-color": "#666666",
     "width": "100%",
     "z-index": 100,
     "display": "none"
  })
  .on("click", function() {
      $(this).hide();
  });
于 2012-10-22T21:20:44.493 に答える
2

私はあなたが次のものが欲しいと思います：

$(function() {
    var docHeight = $(document).height();
    var overlay = $("#wrapper_overlay")
      .height(docHeight)
      .css({
        'opacity' : 0.4,
        'position': 'absolute',
        'top': 0,
        'left': 0,
        'background-color': '#666666',
        'width': '100%',
        'z-index': 100
      }).hide();

    overlay.on('click', function(){
        $(this).hide();
    });

    $("#sec_a_div").on('click', function(){
        overlay.show();
    });
});

jQuery.onと.offメソッドを理解するのはそれほど難しいことではありません。

$(elementSelector).on(eventName, eventHandler);
$(elementSelector).off(eventName, eventHandler);

どこ：

  1. elementSelectorCSSセレクター文字列からDOMオブジェクトのコレクション、または以前に作成されたjQueryセレクションまで何でもかまいません。
  2. eventNameはイベントの名前であり、デフォルト（、、、clickなど）のいずれか、または呼び出しによってトリガーされるカスタムイベントのいずれかになります。mouseoverkeydown$(elementSelector).trigger(eventName);
  3. eventHandlerイベントが発生したときに実行される関数です。この関数に指定される最初の引数は、jQueryのイベントオブジェクトです。

そしてまた

$(elementSelector).on('click', function(){
});

と同じです

$(elementSelector).click(function(){
});
于 2012-10-22T21:36:22.947 に答える
1

そのCSSをクラスに入れるほうがいいでしょう

CSS

#wrapper_overlay
{
 opacity : 0.4;
 position: absolute;
 top: 0;
 left: 0;
 background-color: #666666;
 width: 100%;
 z-index: 100;
 display:none;
}

JAVASCRIPT

$("#sec_a_div").on("click",function () { 
  $("#wrapper_overlay")
    .height($(document).height())
    .show();
});

$("#wrapper_overlay").on("click", function() { $(this).hide());
于 2012-10-22T21:34:08.003 に答える