0
正在尝试做什么是当用户单击“.inner”元素时，它会找到其中的模式窗口并删除“slideOutLeft”类（如果有），然后添加“slideInLeft”类并淡入覆盖元素。 这工作正常。打开和关闭模式窗口无法正常工作
但是什么不工作是当您单击.closeBtn元素它不会删除“slideInLeft”，然后添加“slideOutLeft”类。但是当你点击黑色覆盖后面的模式窗口确实功能正常。
我明显失去了一些东西，但我无法弄清楚。
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>
我创建了一个片段给你。你的JSFiddle也是错误的。没有jQuery选择和运行onload而不是头部︰https://jsfiddle.net/mplungjan/y1zbz318/ – mplungjan
@ kodecount创建一个答案，我会接受，因为正确的原因，你是正确的看到模态窗口是在“内部“的元素，它仍然是可点击的。你的回答实际上已经照顾到了。 – agon024
@ agon024发表我的评论作为答案。谢谢。 – thekodester