Question

我想要做的是当用户点击＆＃34; .inner＆＃34;元素它找到它内部的模态窗口并删除＆＃34; slideOutLeft＆＃34;如果有一个类，然后添加＆＃34; slideInLeft＆＃34;覆盖元素中的类和淡入淡出。 这样可以正常使用。

但不工作的是当你点击.closeBtn元素时它没有删除＆＃34; slideInLeft＆＃34;然后添加＆＃34; slideOutLeft＆＃34;类。但是当您点击模态窗口后面的黑色叠加时，正常运行。

我显然遗漏了一些东西，但我无法弄清楚。

Here is a fiddle with all my code

＆＃13;

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

＆＃13;

*,
*: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
}

＆＃13;

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

＆＃13;

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);
});

打开和关闭模态窗口无法正常工作

2 个答案: