如何通過點擊身體上的任何位置關閉彈出DIV

我有一個覆蓋DIV，一旦用戶點擊鏈接就會出現。用戶可以通過點擊DIV中的「X」鏈接關閉覆蓋層。我希望用戶能夠通過點擊頁面上的任何位置來關閉疊加DIV。請幫助我實現此功能。以下是我的代碼...如何通過點擊身體上的任何位置關閉彈出DIV

$(function(){ 
 
    var mHeight = $(window).height(); 
 
    var popHeight = $(window).height(); 
 
    var mWidth = $(window).width(); 
 
    var popWidth = $(window).width(); 
 
    
 
    $(".pop_Show").click(function(){ 
 
    if(mHeight < popHeight){ 
 
     $(".pop_Content").css({position: "absolute", "margin-top": "0"}); 
 
     $(".pop_Content").animate({top: '0'}, "slow"); 
 
    }else{ 
 
     $(".pop_Content").animate({top: '50px'}, "slow"); 
 
    } 
 
    if(mWidth < popWidth){ 
 
     $(".pop_Content").css({left: "0", "margin-left": "0"}); 
 
    } 
 
    $("body").append("<div class='disable_bg'></div>"); 
 
    }); 
 
    
 

 
//Script for hiding the overlay div by clicking on X 
 
    
 
    $(".pop_Close").click(function(){ 
 
    var popHeight2 = popHeight+500; 
 
    $(".pop_Content").animate({top: "-"+popHeight2}, "100",function(){$(".disable_bg").remove();}); 
 
    }); 
 
    
 
    
 
// I want the script for hiding the overlay by clicking anywhere in the page 
 
    
 
});

.pop_Content { 
 
    overflow: hidden; 
 
    z-index:2500; 
 
    position:fixed; 
 
    top:-2000px; 
 
    left: 50%; 
 
    margin-left:-150px; 
 
    width:300px; 
 
    height:100px; 
 
    background:#ccc; 
 
    padding:15px; 
 
} 
 
.pop_Close{ 
 
    position:absolute; 
 
    z-index:1000; 
 
    top:0; 
 
    right:0; 
 
    float:right; 
 
    cursor:pointer; 
 
    margin:0px 10px; 
 
    color:#595959; 
 
    font:1.5em verdana; 
 
    text-align:center; 
 
} 
 
.pop_Close:before { 
 
    content: "x"; 
 
} 
 
.disable_bg { 
 
    background: black; 
 
    opacity: .5; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    z-index: 2450; 
 
}

<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 

 
<body> 
 
    <a href="#" class="pop_Show">Click Me</a> 
 

 
    <!--Overlay Div--> 
 
    <div class="pop_Content"><a class="pop_Close"></a> 
 
    I am the Overlay Div 
 
    </div> 
 
    
 
</body> 
 
</html>

來源

2016-05-17 Manu

嘗試$（「體> *」）。不是（「tc_bg」）。點擊（函數（）{....}） –

請發表您的全部代碼。代碼片段主要用於顯示完整的代碼。 –

我已經添加了下面的完整代碼。請幫忙 – Manu

您需要添加一個事件偵聽器來檢查您是否點擊了疊加背景。我修改了代碼，以便它重新使用相同的元素，而不是每次都創建一個新元素。這會在每次追加疊加層背景時添加事件偵聽器（jQuery在刪除事件時刪除事件偵聽器）。我還修改了click事件偵聽器的邏輯，以便它只針對與偵聽器應用於的元素直接匹配的點擊事件。這可以防止疊加層通過點擊其內部的內容而被關閉。

$(function(){ 
 
    var mHeight = $(window).height(); 
 
    var popHeight = $(window).height(); 
 
    var mWidth = $(window).width(); 
 
    var popWidth = $(window).width(); 
 
    var disable_bg = $(document.createElement('div')).addClass('disable_bg'), closeFn; 
 
    
 
    $(".pop_Show").click(function(){ 
 
    if(mHeight < popHeight){ 
 
     $(".pop_Content").css({position: "absolute", "margin-top": "0"}); 
 
     $(".pop_Content").animate({top: '0'}, "slow"); 
 
    }else{ 
 
     $(".pop_Content").animate({top: '50px'}, "slow"); 
 
    } 
 
    if(mWidth < popWidth){ 
 
     $(".pop_Content").css({left: "0", "margin-left": "0"}); 
 
    } 
 
    $('body').append(disable_bg); 
 
    disable_bg.click(closeFn); 
 
    }); 
 
    
 

 
//Script for hiding the overlay div by clicking on X 
 
    
 
    $(".pop_Close").click(closeFn = function(e){ 
 
    if(e.target !== this) return; 
 
    var popHeight2 = popHeight+500; 
 
    $(".pop_Content").animate({top: "-"+popHeight2}, "100",function(){disable_bg.remove()}); 
 
    }); 
 
    
 
// I want the script for hiding the overlay by clicking anywhere in the page 
 
    
 
});

.pop_Content { 
 
    overflow: hidden; 
 
    z-index:2500; 
 
    position:fixed; 
 
    top:-2000px; 
 
    left: 50%; 
 
    margin-left:-150px; 
 
    width:300px; 
 
    height:100px; 
 
    background:#ccc; 
 
    padding:15px; 
 
} 
 
.pop_Close{ 
 
    position:absolute; 
 
    z-index:1000; 
 
    top:0; 
 
    right:0; 
 
    float:right; 
 
    cursor:pointer; 
 
    margin:0px 10px; 
 
    color:#595959; 
 
    font:1.5em verdana; 
 
    text-align:center; 
 
} 
 
.pop_Close:before { 
 
    content: "x"; 
 
} 
 
.disable_bg { 
 
    background: black; 
 
    opacity: .5; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 100%; 
 
    height: 100%; 
 
    position: fixed; 
 
    z-index: 2450; 
 
}

<html> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 

 
<body> 
 
    <a href="#" class="pop_Show">Click Me</a> 
 

 
    <!--Overlay Div--> 
 
    <div class="pop_Content"><a class="pop_Close"></a> 
 
    I am the Overlay Div 
 
    </div> 
 
    
 
</body> 
 
</html>

來源

2016-05-18 02:11:14

謝謝..這是我想要的 – Manu

既然你不給了很多關於你的HTML結構信息我想象它會是什麼樣子。

你可以做的是通過點擊覆蓋圖本身來關閉覆蓋圖。

jQuery(".tc_bg").click(function() { 
    var popHeight2 = popHeight + 500; 

    jQuery(".menu_pop").animate({ 
     top: "-" + popHeight2 
    }, "100", function() { 
     jQuery(".tc_bg").remove(); 
    }); 
});

來源

2016-05-17 15:14:10

@Manu你嘗試過選擇器''*：not（.tc_bg）''？ –

如何通過點擊身體上的任何位置關閉彈出DIV

回答

相關問題