Profil von Ezio999999

Ezio999999

21.05.2017, 14:09

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 :)

...zum Beitrag

Antwort

von Ezio999999

21.05.2017, 21:01

$('#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');
    }
});

...zur Antwort