style:
.overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
text-align: center;
}
#quxiao {
position: absolute;
top: 10px;
right: 10px;
font-size: 50px;
background: none;
color: white;
border: navajowhite;
}
html:
<button id="box">遮罩层</button>
<div id="overlay" class="overlay">
<button id="quxiao">×</button>
</div>
script:
$(document).ready(function() {
$('#box').on('click', function() {
$('#overlay').show();
});
$('#closeOverlayBtn, #overlay').on('click', function() {
$('#overlay').hide();
});
});