JS overlay schließen?
ich habe eine Problem mit meiner schließungs-funktion.
$('#overlay-contact').on('click', function(ev) {
console.log(ev.target)
if (ev.Target = $('#overlay-wrapper-contact')) {
$("#overlay-contact").removeClass('show-overlay');
}
});
die Class 'show-overlay' wird durch einen Button hinzugefügt
$('#toggle-btn-contact').on('click', function(){
var elem = $('#overlay-contact');
elem.addClass("show-overlay");
});
<div id="overlay-contact" class="overlay">
<div id="overlay-wrapper-contact" class="overlay-wrapper">
<div class="o_contact-form">
<form action="index_submit" accept-charset="utf-8">
<textarea placeholder="Name:" name="Name"></textarea>
<textarea placeholder="E-Mail:" name="E-mail"></textarea>
<textarea placeholder="Anliegen:"></textarea>
</form>
</div>
</div>
</div>
#overlay-contact.overlay
display: none
position: fixed
height: 100vh
width: 100vw
background: $bg-color
z-index: 999
.overlay-wrapper
display: flex
margin: auto
background: red
padding: 25px
#overlay-contact.show-overlay
display: flex
.overlay-wrapper
animation: slide-down 0.5s ease
das Problem ist das wenn ich außerhalb clicke geht das overlay weg (wie es ja soll), aber wenn ich innerhalb clicke geht es auch weg :/
hier noch als CodePen für (hoffentlich) bessere Übersicht
https://codepen.io/Ezio__/pen/JNevya
hoffe einer kann helfen :)
2 Antworten
Die CSS Datei wäre auch noch hilfreich. Und beschreibe das Problem etwas genauer.
oka CSS bzw Sass ist drin hab auch einen CodePen hinzugefügt wäre cool wenn du nochmal eine Blick drüber werfen könntest :)
$('#overlay-contact').on('click', function(ev) {
//console.log(ev.currentTarget)var overlay = document.getElementById("overlay-wrapper-contact")
if ( overlay.contains(ev.target)) {
console.log('insinde');
} else {
$("#overlay-contact").removeClass('show-overlay');}
});
bestimmt nicht die schönste Lösung, aber naja sie erfüllt wenigstens ihren zweg
btw. kann mir jemand erklären warum ich nur per document.getElementById die function .contains aufrufen kann und nicht einfach per $("#overlay-wrapper-contact") ?