您的位置：首页 > Web前端 > JQuery

jQuery点击空白处隐藏弹出层

2017-09-14 11:02 489 查看

前言

一款jQuery点击空白处隐藏弹出层网页特效，点击按钮弹出层、点击页面空白处弹出层消失JS代码。主要功能是点击按钮弹出层显示,然后通过点击页面任意位置都能关闭弹出层显示效果,主要是$(document).click的操作应用。

方法一

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>front_end_fan</title>
<style>
* {
padding: 0;
margin: 0;
}
#btnShow{
margin: 100px auto 0;
width: 90px;
display: block;
}
#divTop{
border: 2px solid #666666;
position: absolute; display: none;
width: 400px;
height: 200px;
color: #333;
background: #efefef;
padding-top: 10px;
text-align: center;
font: 16px/30px "微软雅黑";
margin-top: -105px;
margin-left: -200px;
left: 50%;
top: 50%;
}
</
d263
style>
</head>
<body>
<input type="button" id="btnShow" value="弹出框按钮" />
<div id="divTop">
点击空白区域弹出层关闭！
</div>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script >
$(function () {
$('#btnShow').click(function (event) {
//取消事件冒泡
event.stopPropagation();
//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
$('#divTop').toggle('slow');
//            return false;
});
//点击空白处隐藏弹出层，下面为滑动消失效果和淡出消失效果。
$(document).click(function(event){
var _con = $('#divTop');   // 设置目标区域
if(!_con.is(event.target) && _con.has(event.target).length === 0){ // 被点击区域 既不是目标区域，也不是包含在目标区域内部！
//$('#divTop').slideUp('slow');   //滑动消失
$('#divTop').hide(1000);          //淡出消失
}
});
})
</script>
</body>
</html>

方法二

<!DOCTYPE html>
<html>
<head>
<title>点击空白处关闭弹出层</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#box{width:300px;height:200px;border:1px solid #000;display:none;}
.btn{color:red;}
</style>
<script type="text/javascript" src="http://www.internetke.com/public/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".btn").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
$("#box").show();
});
$("#box").click(function(event){
var e=window.event || event;
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble = true;
}
});
document.onclick = function(){
$("#box").hide();
};
})
</script>
</head>
<body>
<div id="box"></div>
<button class="btn">点击此处打开弹出层</button>
<br><br><br><br>
<br>点击空白处关闭弹出层
</body>
</html>

比较

关于两种方法的优劣，请读者留言评论。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航