<script src="js/jquery.min.js"></script>
<style>
.container{
width:240px;
height:240px;
background-color:yellow;
}
.none {
display: none;
}
.choose-box {
position: absolute;
top: 35px;
width: 220px;
height: 200px;
background-color: cyan;
border: 1px solid #999;
z-index: 2;
}
</style>
<div class="container">
<button class="show-box-btn">点击出现弹窗</button>
<div class="choose-box none">
afrasdfasdfasdfadsf
</div>
</div>
<script>
$(".show-box-btn").on('click', function () {
$(".choose-box").toggleClass("none");
})
// 点击除弹窗意外的其他部分时关闭弹窗
$(document).on('click', function (e) {
if ($(e.target).closest('.container').length > 0) {
// alert('弹出框内部被点击了');
} else {
// alert('弹出框以外的部分被点击了');
// 关闭弹框
$('.choose-box').addClass("none");
// $('.choose-box').hide();
}
})
</script>