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