Open and close modal windows not working

Question

What am trying to do is when a user clicks the ".inner" element it finds the modal window that is inside of it and removes the "slideOutLeft" class if there is one and then adds the "slideInLeft" class and fades in the overlay element. This works fine .

But what doesn't work is when you click the .closeBtn element it doesn't remove the "slideInLeft" and then add the "slideOutLeft" class. But when you click the black overlay behind the modal window it does function properly.

I'm obviously missing something but I can't figure it out.

Here is a fiddle with all my code

 $(document).ready(function() { $('.inner').click(function() { $(this).find('.modalWindow').removeClass('slideOutLeft').addClass('slideInLeft').css('display', 'block'); $('.overlay').fadeToggle(500); }); $('.closeBtn, .overlay').click(function() { $('.modalWindow').removeClass('slideInLeft').addClass('slideOutLeft'); $('.overlay').fadeToggle(500); }); }); 

 *, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .wrapper { width: 50%; float: left; text-align: center; padding: 20px; } .modalBtn { padding: 15px 30px; border: 1px solid #333; border-radius: 5px; text-transform: uppercase; } .overlay { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.3); position: fixed; top: 0; left: 0; z-index: 999997; display: none; } .modalWindow { width: 80%; right: 0; left: 0; top: 50%; margin: 0 auto; height: auto; position: fixed; display: none; -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 999998; background-color: white; padding: 20px; } .closeBtn { font-size: 32px; color: #333; position: absolute; right: 20px; top: 5px; } .inner:hover { cursor: pointer; } /* Animations */ .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } /*the animation definition*/ @-webkit-keyframes slideInLeft { 0% { -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); visibility: visible } 100% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } @keyframes slideInLeft { 0% { -webkit-transform: translate3d(-125%, 0, 0); -ms-transform: translate3d(-125%, 0, 0); transform: translate3d(-125%, 0, 0); visibility: visible } 100% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } } .slideInLeft { -webkit-animation-name: slideInLeft; animation-name: slideInLeft } @-webkit-keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { visibility: hidden; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0) } } @keyframes slideOutLeft { 0% { -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } 100% { visibility: hidden; -webkit-transform: translate3d(-125%, 0, 0); -ms-transform: translate3d(-125%, 0, 0); transform: translate3d(-125%, 0, 0) } } .slideOutLeft { -webkit-animation-name: slideOutLeft; animation-name: slideOutLeft } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="overlay" class="overlay"></div> <div class="wrapper"> <div class="inner"> <div class="modalBtn">click for modal 1</div> <div class="modalWindow animated"> <div class="closeBtn">X</div> <span>This is modal window 1</span> </div> </div> </div> <div class="wrapper"> <div class="inner"> <div class="modalBtn">click for modal 2</div> <div class="modalWindow animated"> <div class="closeBtn">X</div> <span>This is modal window 2</span> </div> </div> </div> 

Answer 1

Problem is in your html structure, so when you click on close button you are clicking on .inner div, too: Fix:

 $('.closeBtn, .overlay').click(function(e){
  e.stopPropagation();
    $('.modalWindow').removeClass('slideInLeft').addClass('slideOutLeft');
    $('.overlay').fadeToggle(500);
  });

Demo: https://jsfiddle.net/ssjfu611/24/

Answer 2

The issue is your <div class="inner"> is still clickable please change your HTML mark up:

<div class="wrapper">
  <div class="inner">
    <div class="modalBtn">click for modal 1</div>
  </div>

  //KEEP THIS OUT OF THE INNER DIV
  <div class="modalWindow animated">
    <div class="closeBtn">X</div>
    <span>This is modal window 1</span>
  </div>
</div>

Then your JavaScript too:

$('.inner').click(function() {
 $(this).parent().find('.modalWindow').removeClass('slideOutLeft').addClass('slideInLeft').css('display', 'block');
 $('.overlay').fadeToggle(500);
});