js点击弹框外的部分弹框关闭

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