打開和關閉模式窗口不起作用

Question

要做的是，當用戶單擊“ .inner”元素時，它會找到其中的模式窗口並刪除“ slideOutLeft”類（如果有的話），然后添加“ slideInLeft”類並在疊加層中淡入淡出元件。 這很好用 。

但是，當你點擊.closeBtn元素，它不會刪除“slideInLeft”，然后添加“slideOutLeft”類什么行不通的。 但是，當您單擊模態窗口后面的黑色覆蓋時 ，它可以正常運行。

我顯然缺少了一些東西，但我無法弄清楚。

這是我所有代碼的小提琴

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

問題出在您的html結構中，因此，當您單擊關閉按鈕時，您也同時單擊了.inner div：修復：

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

演示： https : //jsfiddle.net/ssjfu611/24/

Answer 2

問題是您的<div class="inner">仍可點擊，請更改您的HTML標記：

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

然后你的JavaScript：

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