<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<title>点击空白处关闭弹窗</title>
<style>
.btn{
display: inner-block;
padding: 5px;
border: 1px red solid;
border-radius: 6px;
cursor: pointer;
}
.pop{
width: 200px;
height: 200px;
border: 2px solid red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display: none;
padding: 10px;
}
</style>
</head>
<body>
<span class="btn btn-pop">点我</span>
<div class="pop">
<p>这是面是弹窗内容</p>
<span class="btn close">关闭</span>
</div>
<script src="js/jquery-1.10.1.min.js"></script>
<script>
var pop = $('.pop');
$('.btn-pop').on('click', function(e){
e.stopPropagation();
pop.show();
});
$('.close').on('click', function(){
pop.hide();
});
$(document).click(function(e){
// 方法1
// if($(':not(.pop)')){
// pop.hide();
// }
// 方法2
if(!pop.is(e.target) && pop.has(e.target).length === 0){
pop.hide();
}
});
</script>
</body>
</html>
如果我们用的是onclick="oncall()",点击弹出弹框用，该方法需要在函数里获取e
function yingxiao(){
var e = window.event || arguments.callee.caller.arguments[0];//获取e
e.stopPropagation();
$('.mar').show();
}
该方法适用于苹果手机和安卓手机，比较推荐使用
<input type="button" id="btnShow" value="显示提示内容" />
</div>
<div id="divTop"
style=" background-color:#99CCFF; border: solid 2px #ff0000; position:absolute; display:none; width:400px; height:200px;">
<div style="text-align:center;">点击本区域或空白隐藏弹出层</div>
$(function () {
$('#btnShow').click(function (event) {
//取消事件冒泡
event.stopPropagation();
//设置弹出层的位置
var offset = $(event.target).offset();
$('#divTop').css({ top: offset.top + $(event.target).height() + "px", left: offset.left });
//按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。
// $('#divTop').toggle('slow');
$('#divTop').fadeIn()
});
//点击空白处或者自身隐藏弹出层，下面分别为滑动和淡出效果。
$(document).click(function (event) { $('#divTop').slideUp('slow') });
$('#divTop').click(function (event) { $(this).fadeOut(1000) });
})
网友评论