Wie man Popup DIV schließt, indem man irgendwo auf den Körper klickt

Ich habe ein Overlay DIV, das erscheint, sobald ein Benutzer auf einen Link klickt. Der Benutzer kann das Overlay schließen, indem er im DIV auf den Link "X" klickt. Ich möchte, dass der Benutzer das Overlay-DIV schließen kann, indem er auf eine beliebige Stelle auf der Seite klickt. Bitte helfen Sie mir, diese Funktionalität zu implementieren. Nach meinem Code sind ...Wie man Popup DIV schließt, indem man irgendwo auf den Körper klickt

$(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>

Quelle

2016-05-17 Manu

$ versuchen ("body> *"). Nicht ("tc_bg"). Klicken (function() {....}) –

bitte Ihre vollständigen Code schreiben. Snippet wird hauptsächlich zum Anzeigen des vollständigen Codes verwendet. –

Ich habe den vollständigen Code unten hinzugefügt. Bitte helfen Sie – Manu

Sie müssen einen Ereignis-Listener hinzufügen, der prüfen kann, ob Sie auf den Overlay-Hintergrund geklickt haben. Ich habe den Code so geändert, dass er dasselbe Element wiederverwendet, anstatt jedes Mal ein neues zu erstellen. Dies fügt den Ereignis-Listener jedes Mal hinzu, wenn Sie den Hintergrund des Overlays anfügen (jQuery entfernt die Ereignis-Listener beim Entfernen). Außerdem habe ich die Logik des Klickereignis-Listeners so geändert, dass nur Click-Ereignisse ausgewählt werden, die direkt mit dem Element übereinstimmen, auf das der Listener angewendet wurde. Dadurch wird verhindert, dass das Overlay geschlossen wird, indem Sie auf den darin enthaltenen Inhalt klicken.

$(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>

Quelle

2016-05-18 02:11:14

Danke .. das ist was ich wollte – Manu

Da Sie nicht geben Ich muss eine Menge Informationen über Ihre HTML-Struktur vorstellen, wie es aussehen könnte.

Sie können das Overlay schließen, indem Sie auf das Overlay klicken.

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

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

Quelle

2016-05-17 15:14:10

@Manu Haben Sie versucht, den Selektor ''*: nicht (.tc_bg)''? –

Wie man Popup DIV schließt, indem man irgendwo auf den Körper klickt

Antwort

Verwandte Themen