jQuery实现弹出层与遮罩效果
该资源提供了一种使用jQuery实现弹出层和遮罩层的方法,适用于在网页中创建具有遮罩效果的弹出框或弹出页面。提供的代码示例包括JavaScript函数和CSS样式,用于展示和关闭弹出层。 ### jQuery 弹出层与遮罩层实现 在网页开发中,弹出层(通常称为对话框或模态窗口)是一种常见的交互设计,用于在用户浏览页面时显示额外的信息或进行特定操作。遮罩层则用于覆盖整个页面,使用户只能关注弹出层的内容,避免其他部分的干扰。以下是如何使用jQuery来实现这一功能: #### JavaScript 部分 ```javascript // 显示遮罩层与弹出层 function showBg() { var bh = $("body").height(); // 获取页面body的高度 var bw = $("body").width(); // 获取页面body的宽度 $("#fullbg").css({ // 设置遮罩层的尺寸并显示 height: bh, width: bw, display: "block" }); $("#dialog").show(); // 显示弹出层 } // 关闭遮罩层与弹出层 function closeBg() { $("#fullbg,#dialog").hide(); // 隐藏遮罩层和弹出层 } ``` 这里定义了两个JavaScript函数,`showBg`用于显示弹出层和遮罩层,`closeBg`用于关闭它们。`showBg`函数首先获取页面body的高度和宽度,然后设置id为`fullbg`的遮罩层的尺寸,并将其显示出来。接着,显示id为`dialog`的弹出层。`closeBg`函数则简单地隐藏这两个元素。 #### CSS 部分 ```css #fullbg { background-color: gray; left: 0; opacity: 0.5; position: absolute; top: 0; z-index: 3; filter: alpha(opacity=50); /* IE6-8 的兼容性处理 */ -moz-opacity: 0.5; /* Firefox 3.5及更早版本 */ -khtml-opacity: 0.5; /* Safari 3 及更早版本 */ } #dialog { background-color: #fff; border: 5px solid rgba(0, 0, 0, 0.4); height: 430px; left: 50%; margin: -200px 0 0 -200px; /* 使得弹出层居中 */ padding: 1px; position: fixed !important; /* 固定定位 */ position: absolute; /* 兼容性处理 */ top: 50%; width: 607px; z-index: 5; border-radius: 5px; display: none; } ``` 这段CSS定义了两个元素的样式:`#fullbg`是遮罩层,设置为灰色半透明,绝对定位在整个页面上;`#dialog`是弹出层,白色背景,带有黑色边框,使用固定定位使其在页面中心,同时设置了圆角效果。弹出层初始状态为隐藏,调用`showBg`函数后将显示。 #### HTML 结构 ```html <div id="fullbg"></div> <!-- 遮罩层 --> <div id="dialog"> <p class="close"><a href="#" onclick="closeBg()">关闭</a></p> <!-- 弹出层内的关闭按钮 --> <!-- 其他弹出层内容 --> </div> ``` HTML结构中,有两个`div`元素,一个用于遮罩层,一个用于弹出层。弹出层内包含一个类名为`close`的段落,其中的链接可以通过点击触发`closeBg`函数,关闭弹出层。 ### 使用方法 1. 将上述JavaScript代码放置在`<script>`标签内,确保在jQuery库加载之后执行。 2. 将CSS代码放入`<style>`标签中,或者链接到外部CSS文件。 3. 在适当位置添加HTML结构。 4. 调用`showBg()`函数以显示弹出层和遮罩层。 5. 用户可以通过点击关闭按钮或自行编写触发`closeBg()`的事件来关闭弹出层。 ### 自定义与优化 为了适应不同的项目需求,你可以根据实际情况调整CSS样式,比如改变弹出层的大小、颜色、边框等属性,也可以调整遮罩层的透明度。如果需要自定义内容,只需修改`#dialog`内部的HTML结构即可。同时,可以通过修改JavaScript函数实现更多交互效果,例如动画过渡、异步加载数据等。 这个资源提供了一个基础的jQuery弹出层和遮罩层解决方案,开发者可以根据自己的需求进行扩展和优化,以满足不同项目的实际需求。
<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>
<style type="text/css">
#fullbg {
background-color:gray;
left:0;
opacity:0.5;
position:absolute;
top:0;
z-index:3;
filter:alpha(opacity=50);
-moz-opacity:0.5;
下载后可阅读完整内容,剩余2页未读,立即下载
- 粉丝: 0
- 资源: 2
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 李兴华Java基础教程:从入门到精通
- U盘与硬盘启动安装教程:从菜鸟到专家
- C++面试宝典:动态内存管理与继承解析
- C++ STL源码深度解析:专家级剖析与关键技术
- C/C++调用DOS命令实战指南
- 神经网络补偿的多传感器航迹融合技术
- GIS中的大地坐标系与椭球体解析
- 海思Hi3515 H.264编解码处理器用户手册
- Oracle基础练习题与解答
- 谷歌地球3D建筑筛选新流程详解
- CFO与CIO携手:数据管理与企业增值的战略
- Eclipse IDE基础教程:从入门到精通
- Shell脚本专家宝典:全面学习与资源指南
- Tomcat安装指南:附带JDK配置步骤
- NA3003A电子水准仪数据格式解析与转换研究
- 自动化专业英语词汇精华:必备术语集锦