html+css+jquery页面弹窗案例代码 jq当点击弹窗外的其他区域时，关闭弹窗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Popup Example</title>
<style>
#overlay {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
z-index: 1000;
}
.popup {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background: #fff;
z-index: 1001;
padding: 20px;
}
</style>
</head>
<body>
<button id="openBtn">打开弹窗</button>
<div id="overlay">
<div class="popup">
<h2>弹窗标题</h2>
<p>这是一个简单的弹窗示例。</p>
<button id="closeBtn">关闭弹窗</button>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$("#openBtn").click(function(){
$("#overlay").fadeIn();
});
$("#closeBtn, #overlay").click(function(event){
if(event.target === this) {
$("#overlay").fadeOut();
}
});
});
</script>
</body>
</html>这段代码实现了一个简单的弹窗功能，当点击按钮时弹窗会显示，点击弹窗内的关闭按钮或者点击弹窗外的任何地方都会关闭弹窗。这个例子使用了jQuery来处理事件绑定和淡出效果。
评论已关闭