我尝试做的是，当用户单击“ .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>