我制作了三个分别具有自己的按钮的框,单击它们会弹出各自的模式,当我单击其他任何位置时它们将关闭,您可以通过下面共享的链接看到它们。现在出现的问题是,当我单击模态本身(在模态上)时,它已关闭,这是错误的。我正在尝试解决此问题,但没有得到足够的解决方案,可能会得到你们的帮助。
enter link description here
片段:
$(window).on('load', function () {
$(".btnOne").click(function (event) {
event.stopPropagation();
$(".modalOne").addClass("open");
$(".modalTwo").removeClass("open");
$(".modalThree").removeClass("open");
});
$(".btnTwo").click(function (event) {
event.stopPropagation();
$(".modalTwo").addClass("open");
$(".modalThree").removeClass("open");
$(".modalOne").removeClass("open");
});
$(".btnThree").click(function (event) {
event.stopPropagation();
$(".modalThree").addClass("open");
$(".modalOne").removeClass("open");
$(".modalTwo").removeClass("open");
});
//Keep an eye on this part
$('html').click(function () {
$(".modal").removeClass("open");
});
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
html,
body {
margin: 0;
padding: 0;
}
.container {
width: 1170px;
margin: 20px auto;
}
.box {
float: left;
width: 300px;
height: 300px;
margin: 0 10px;
padding: 20px;
position: relative;
border-radius: 5px;
background: #eee;
}
.btn {
float: left;
font-size: 14px;
line-height: 18px;
color: #fff;
cursor: pointer;
padding: 10px;
position: relative;
border: 0;
border-radius: 5px;
text-transform: uppercase;
outline: 0;
z-index: 2;
background: #f00;
}
.modal {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
}
.modal.open {
opacity: 1;
z-index: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<button type="button" class="btn btnOne">button</button>
<div class="modal modalOne">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="box">
<button type="button" class="btn btnTwo">button</button>
<div class="modal modalTwo">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="box">
<button type="button" class="btn btnThree">button</button>
<div class="modal modalThree">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
最佳答案
$(".btnOne").click(function(event) {
event.stopPropagation();
$(".modalOne").addClass("open");
$(".modalTwo").removeClass("open");
$(".modalThree").removeClass("open");
});
$(".btnTwo").click(function(event) {
event.stopPropagation();
$(".modalTwo").addClass("open");
$(".modalThree").removeClass("open");
$(".modalOne").removeClass("open");
});
$(".btnThree").click(function(event) {
event.stopPropagation();
$(".modalThree").addClass("open");
$(".modalOne").removeClass("open");
$(".modalTwo").removeClass("open");
});
$(document).on("click touchstart", function(e) {
var container = $(".modal");
console.log()
if (!$(e.target).hasClass("open") && !$(e.target).closest(".modal").hasClass("open") ) {
container.removeClass("open");
}
});
* {
box-sizing: border-box;
-webkit-box-sizing: border-box;
transition: all 0.3s ease 0s;
-webkit-transition: all 0.3s ease 0s;
}
html,
body {
margin: 0;
padding: 0;
}
.container {
width: 1170px;
margin: 20px auto;
}
.box {
float: left;
width: 300px;
height: 300px;
margin: 0 10px;
padding: 20px;
position: relative;
border-radius: 5px;
background: #eee;
}
.btn {
float: left;
font-size: 14px;
line-height: 18px;
color: #fff;
cursor: pointer;
padding: 10px;
position: relative;
border: 0;
border-radius: 5px;
text-transform: uppercase;
outline: 0;
z-index: 2;
background: #f00;
}
.modal {
opacity: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 5px;
z-index: 1;
background: rgba(0, 0, 0, 0.6);
}
.modal.open {
opacity: 1;
z-index: 3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
<div class="box">
<button type="button" class="btn btnOne">button</button>
<div class="modal modalOne">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="box">
<button type="button" class="btn btnTwo">button</button>
<div class="modal modalTwo">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has</p>
<h1>asas</h1>
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
<div class="box">
<button type="button" class="btn btnThree">button</button>
<div class="modal modalThree">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
</div>
</div>
请检查代码段代码