html点击空白弹窗消失,点击空白区域，弹框消失

点击空白处关闭弹窗

.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;

}

点我

这是面是弹窗内容

关闭

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();

}

});

如果我们用的是οnclick="oncall()",点击弹出弹框用，该方法需要在函数里获取e

function yingxiao(){

var e = window.event || arguments.callee.caller.arguments[0];//获取e

e.stopPropagation();

$('.mar').show();

}

该方法适用于苹果手机和安卓手机，比较推荐使用