<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网页特效展示中心</title>
<style type="text/css">
* {
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%;
}
</style>
</head>
<body>
<input type="button" id="btnShow" value="弹出框按钮" />
<div id="divTop">
点击空白区域弹出层关闭!
</div>
<script src="./jquery.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) { // Mark 1
//$('#divTop').slideUp('slow'); //滑动消失
$('#divTop').hide(1000); //淡出消失
}
});
})
</script>
</body>
</html> from:http://www.wufangbo.com/js-dan-ji-yin-chang/
js实现点击空白处隐藏
最新推荐文章于 2023-06-25 14:22:17 发布