我们经常使用到弹出层。对于弹出层,原本的意义就是增加与用户的交互,提升用户的好感度。我们在使用的时候需要注意几个弹出层的注意点:
弹出层的界面需要统一,不一致的弹出层并不能增加美感,相反还会显得页面布局更加杂乱无章;
弹出层的设计一定要好看,按钮要符合项目的主色调;
弹出层的宽度固定屏幕占比,设置 max-width,高度根据内容自适应;
点击其他区域能隐藏弹出层。
今天,主要说说点击其他区域隐藏弹出层 什么是事件冒泡?为什么要使用它?
事件冒泡:由最具体的元素接收(当前节点),然后逐级向上传播至最不具体的元素的节点(document);
在实现点击其他区域隐藏弹出层时,需要对 document 绑定点击事件,而事件冒泡会使点击其它节点时仍然触发该事件,从而造成事件冲突,导致该显示弹出层时显示不出,不该隐藏时却又隐藏了弹出层。。余斗被这个效果折磨了很久,皆是因为对事件冒泡的理解不够已经错误处理。
<style type="text/css">
.layer-container{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
display: flex;
justify-content; center;
align-items: center;
display: none;
}
.layer-main{
width: 75%;
padding: 20px;
max-width: 400px;
}
</style>
<body>
<button>显示弹出层</button>
<div class="layer-container">
<div class="layer-main">
<div class="layer-header"></div>
<div class="layer-content"></div>
<div class="layer-footer">
<div class="layer-button">确认</div>
</div>
</div>
</div>
<script>
//点击按钮,显示弹出层
$("button").bind("click", function(){
$(".layer-container").css("display", "flex");
event.stopPropagation();//==========阻止冒泡1
})
//点击其他区域,隐藏弹出层
$(document).bind("click", function(){
$(".layer-container").css("display", "none");
})
//点击弹出层内确认按钮
$(".layer-button").bind("click", function(){
console.log("点击了确认按钮")
})
//给弹出层绑定点击事件,阻止冒泡
$(".layer-main").bind("click", function(){
event.stopPropagation();//==========阻止冒泡2
})
</script>
</body>
$(document)即给整个文档绑定点击事件,点击则隐藏弹出层 container;
$("button")给按钮绑定点击事件,点击即显示弹出层 container;
此处必须加 event.stopPropagation()阻止冒泡,否则先执行 button 的事件显示弹出层 container,又向上冒泡执行 document 事件隐藏弹出层 container,导致最终点击没有效果;
$(".layer-main")给弹出层 main 绑定点击事件,点击它或冒泡到它时,即阻止继续冒泡到 document;
此处的点击事件以及阻止冒泡必须加,否则点击弹出层 main 或里面的其他节点,都会冒泡到 document,从而隐藏弹出层 container,导致事件紊乱。
其实,还可以通过事件的目标(event.target)来识别当前点击的节点,从而进行接下来的操作,比如对指定的节点的特殊操作
==>>除指定区域外点击任何区域都隐藏 div:
$('body').click(function(e) {
var target = $(e.target);
// 如果#layer或者#btn下面还有子元素,可使用
// !target.is('#btn *') && !target.is('#layer *')
if(!target.is('#btn') && !target.is('#layer')) {
if ( $('#layer').is(':visible') ) {
$('#layer').hide();
}
}
});
$('body').click(function(e) {
if(e.target.id != 'btn' && e.target.id != 'overlay')
if ( $('#layer').is(':visible') ) {
$('#layer').hide();
}
})
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!