1.html
.boxBody{
position: absolute;top:0;left:0;
width: 100%;height:100%;
background-color: rgba(0,0,0,0.7);
}
.tipBox{
width: 60%;height: 460px;
border-style: solid;
border-width: 2px;
border-image-source: linear-gradient(-90deg,
rgba(169, 68, 255, 0.73) 0%,
rgba(27, 209, 255, 0.73) 99%);
border-image-slice: 1;
position: absolute;
top:calc(50% - 230px);
left:20%;
background-color: rgba(26, 59, 113, 0.6);
}
<div class='boxBody'>
<div class='tipBox'></div>
</div>
2.js
因为最外层boxBody已经width/height100%;所以最外层是body也可以用,可改为$(document).click…
$(".tipBox").click(function(event){
event=event||window.event;
event.stopPropagation();
});
//点击层外,隐藏这个层。由于层内的事件停止了冒泡,所以不会触发这个事件
$('.boxBody').click(function(e){
$(".boxBody").hide();
});
3.另外一种方法,利用is
//点击除了圆圈 和 弹出的div外的任一区域 隐藏 div
$(document).click(function (e) {
var target = $(e.target);
// 如果#overlay或者#btn下面还有子元素,可使用
// !target.is('#btn *') && !target.is('#overlay *')
if (!target.is('.sCircleText') && !target.is('.alarmList') && !target.is('.btn') && !target.is('a') && !target.is('.modal *')) {
if ($('.alarmList').is(':visible')) {
$('.alarmList').hide();
}
}
});