单击浏览器滚动条关闭弹出窗口

时间:2014-01-23 07:50:03

标签: javascript jquery html css popup

当点击浏览器滚动条时,我的popop窗口关闭了。 我使用此代码关闭弹出窗口:

//Closing the pop up when clicked outside of it.
  $(document).click(function(e) {
     $("#popup").mouseup(function() {
            return false;
     });
          // Bind mouseup event to all the document
    $(document).mouseup(function(e) {
        // Check if the click is outside the popup 
        if($(e.target).parents("#popup").length==0 && !$(e.target).is("#popup") && $(e.target).parents(".calendar").length==0) {
        // Hide the popup
        alert("hi");
        $("#popup").hide();
    }
    });

 });  

我的popup css是:

element.style {
    display: block;
}
.popupDiv {
    background: none repeat scroll 0 0 rgb(245, 245, 245);
    border-width: 1px 1px 3px;
    padding: 10px 10px 35px;
    position: absolute;
    right: 0;
    top: 85px;
    z-index: 999;
}

当我点击浏览器的滚动条时,我需要关闭弹出窗口。

2 个答案:

答案 0 :(得分:2)

希望这会对你有帮助。

$(document).ready(function(){
    $( window ).scroll(function() {
       $("#popup").hide();
    });
});

答案 1 :(得分:0)

仅滚动条单击(用于滚动条单击的黑客代码)

<强> FiddleFromReference

Determine whether user clicking scrollbar or content (onclick for native scroll bar)

检查目标值

仅限身体

 $("body").mouseup(function(e) {

    alert("hi");

}); 

检查特定目标

  $(document).click( function (event) {
  var idName = event.target.id;   // Use  event.target.nodeName
  if(idName == "my_link"){
    return false;
  };
  $('#your_div').fadeOut(350);

});

包括滚动条在内的正文内容

 $(window).mouseup(function(e) {
 if (e.target == $('html').get(0)) { // Except body content
 alert("hi"); 
 }
 });