jQuery弹出DIV层（简易）

最新推荐文章于 2019-07-23 04:30:16 发布

原创最新推荐文章于 2019-07-23 04:30:16 发布 · 668 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 3 个专栏收录

10 篇文章

订阅专栏

jQuery

9 篇文章

订阅专栏

CSS样式及浏览器兼容问题

4 篇文章

订阅专栏

本文介绍了一种使用HTML、CSS及jQuery实现的弹出式对话框效果，通过背景遮罩增强用户体验。该方法适用于网页中需要展示额外信息或进行交互操作的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出DIV</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
margin: 0;
}
#main {
height: 1800px;
padding-top: 90px;
text-align: center;
}
#fullbg {
background-color: gray;
left: 0;
opacity: 0.5;
position: absolute;
top: 0;
z-index: 3;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
}

#dialog {
background-color: #fff;
border: 5px solid rgba(0,0,0, 0.4);
height: 400px;
left: 50%;
margin: -200px 0 0 -200px;
padding: 1px;
position: fixed !important; /* 浮动对话框 */
position: absolute;
top: 50%;
width: 400px;
z-index: 5;
border-radius: 5px;
display: none;
}
#dialog p {
margin: 0 0 12px;
height: 24px;
line-height: 24px;
background: #CCCCCC;
}
#dialog p.close {
text-align: right;
padding-right: 10px;
}
#dialog p.close a {
color: #fff;
text-decoration: none;
}
</style>
<script type="text/javascript" src="../Scripts/jquery-1.8.2.js"></script>
<script type="text/javascript">
//显示灰色 jQuery 遮罩层
function showBg() {
var bh = $("body").height();
var bw = $("body").width();
$("#fullbg").css({
height: bh,
width: bw,
display: "block"
});
$("#dialog").show();
}
//关闭灰色 jQuery 遮罩
function closeBg() {
$("#fullbg,#dialog").hide();
}
</script>
</head>
<body>
<form>
<div id="main">
<a href="javascript:showBg();">点击这里查看效果</a>
<div id="fullbg"></div>
<div id="dialog">
<p class="close">
<a href="#" onclick="closeBg();">关闭</a></p>
<div>正在加载，请稍后....</div>
</div>
</div>
</form>
</body>
</html>