我制作了三个盒子，每个盒子都有自己的按钮，点击它们各自的模态会弹出，当我点击其他地方时它们会关闭，你可以通过我在下面分享的链接看到它们。现在出现的问题是，当我点击模态本身（在模态上）时，它会被关闭，这是错误的。我试图解决这个问题，但没有得到足够的解决方案，可能会得到你们的帮助。
段：
$(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>
答案 0 :(得分：2)
诀窍是检查.modal.open
$('html').click(function(evt) {
if (!$(evt.target).closest(".modal").is(".modal.open")) {
$(".modal.open").removeClass("open");
}
});
答案 1 :(得分：0)
$(".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>
请检查代码段
答案 2 :(得分：0)
您要搜索的是来自jQuery的event.target。你总会得到整个＆＃34; html＆＃34;节点，如果你听它上面的点击事件。但是，您可以获得由eve.target对象直接单击的节点。
示例：
$( "body" ).click(function( event ) {
$( "#log" ).html( "clicked: " + event.target.nodeName );
}); span, strong, p {
padding: 8px;
display: block;
border: 1px solid #999;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="log"></div>
<div>
<p>
<strong><span>click</span></strong>
</p>
</div>
您案例中的用法是：
$('html').click(function (eve) {
if(!eve.target.className.contains("open")){
$(".modal").removeClass("open");
}
});
我已添加if的节点检查点击的目标是否为开放模式（className.contains。（＆＃34; open＆＃34;））。
这里是完整的代码：
$(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 (eve) {
if(!eve.target.className.contains("open")){
$(".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>
另一个暗示。你有点滥用class属性。你可能想要添加＆＃34; modalOne＆＃34;，＆＃34; modalTwo＆＃34;和＆＃34; modalThree＆＃34;作为ids。
例如：
<div class="modal" id="2">
Lorem Ipsum is simply dummy text of the printing and
</div>
您可以避免重复信息这样做，并避免出现CSS样式优先级问题。
进一步阅读：