如图，我有一个弹窗想点击除轮播区域外的地方关闭弹窗，点击切换按钮实现切换图片代码如下$('.cut-model').bind('click',function(e){ $(this).hide();//点击空白区域关闭弹窗})$('.round').bind('click',function(e){ e.stopPropagation();//点击切换按钮阻止冒泡})然而。。。。并没有成功，点击切换按钮时弹窗仍然关闭，请教各位大神是什么原因，我写的不对吗？谢谢
1 回答
汪汪一只猫
TA贡献1898条经验 获得超8个赞
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="jquery.min.js"></script>
<style>
.over-lay{
width: 300px;
height: 300px;
position: absolute;
left:50px;
top:50px;
background-color: rgba(235,235,235,0.5);
}
.over-lay.hide{
display: none;
}
.content{
background-color: green;
width: calc(100% - 60px);
height: calc(100% - 0px);
border-radius: 10px;
position: absolute;
left: 30px;
top: 0px;
}
.back-button,.forward-button{
width: 30px;
height: 30px;
position: absolute;
top:calc(50% - 15px);
left:0px;
background-color: red;
font-size: 12px;
}
.forward-button{
right:0px;
left:auto;
}
</style>
<script>
$(function(){
$(".over-lay").on("click",".back-button,.forward-button",function(event){
console.log("不关闭overlay");
event.stopPropagation();//阻止冒泡到.over-lay
});
$(".over-lay").on("click",function(event){
console.log("关闭overlay");
$(this).addClass("hide");
});
});
</script>
</head>
<body>
<div class="over-lay">
<div class="back-button">后退</div>
<div class="content"></div>
<div class="forward-button">前进</div>
</div>
</body>
</html>
添加回答
举报
0/150
提交
取消