jQuery+css+html实现页面遮罩弹出框


Posted in Javascript onMarch 21, 2013

页面遮罩弹出框是最常见的一种情况,今天用jQuery实现页面遮罩弹出框,主要用的技术有JQuery,css和html,

html代码如下:

<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>

css代码如下:
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; 
}

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>

大致预览情况:

在ie9中预览

jQuery+css+html实现页面遮罩弹出框

在firefox中预览

jQuery+css+html实现页面遮罩弹出框

在chrome中预览

jQuery+css+html实现页面遮罩弹出框

Javascript 相关文章推荐
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
在父页面调用子页面的JS方法
Sep 29 Javascript
javascript创建和存储cookie示例
Jan 07 Javascript
jQuery如何获取动态添加的元素
Jun 24 Javascript
Bootstrap基本组件学习笔记之列表组(11)
Dec 07 Javascript
EasyUI为Numberbox添加blur事件的方法
Mar 05 Javascript
原生js实现吸顶效果
Mar 13 Javascript
关于vue-router路径计算问题
May 10 Javascript
使用vue如何构建一个自动建站项目
Feb 05 Javascript
JavaScript判断浏览器运行环境的详细方法
Jun 30 Javascript
js canvas实现5张图片合成一张图片
Jul 15 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
Mar 21 #Javascript
jquery实现网站超链接和图片提示效果
Mar 21 #Javascript
jquery 表格的增行删行实现思路
Mar 21 #Javascript
杨氏矩阵查找的JS代码
Mar 21 #Javascript
JavaScript 判断浏览器是否支持SVG的代码
Mar 21 #Javascript
js禁止document element对象选中文本实现代码
Mar 21 #Javascript
JS获取并操作iframe中元素的方法
Mar 21 #Javascript
You might like
PHP $_FILES函数详解
2011/03/09 PHP
编写安全 PHP应用程序的七个习惯深入分析
2013/06/08 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
php如何比较两个浮点数是否相等详解
2019/02/12 PHP
jquery 如何动态添加、删除class样式方法介绍
2012/11/07 Javascript
js 获取和设置css3 属性值的实现方法
2013/05/06 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
Jquery getJSON方法详细分析
2013/12/26 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
JQuery异步获取返回值中文乱码的解决方法
2015/01/29 Javascript
JQuery实现可直接编辑的表格
2015/04/16 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
jQuery的ajax和遍历数组json实例代码
2016/08/01 Javascript
JavaScript实现替换字符串中最后一个字符的方法
2017/03/07 Javascript
微信小程序实现皮肤功能(夜间模式)
2017/06/18 Javascript
angularjs实现猜大小功能
2017/10/23 Javascript
mui back 返回刷新页面的实例
2017/12/06 Javascript
AngularJS自定义表单验证功能实例详解
2018/08/24 Javascript
javascript数据类型中的一些小知识点(推荐)
2019/04/18 Javascript
JS Math对象与Math方法实例小结
2019/07/05 Javascript
Python实现字符串格式化的方法小结
2017/02/20 Python
node.js获取参数的常用方法(总结)
2017/05/29 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
对django2.0 关联表的必填on_delete参数的含义解析
2019/08/09 Python
解决Pytorch 训练与测试时爆显存(out of memory)的问题
2019/08/20 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
优秀学生评语大全
2014/04/25 职场文书
交通志愿者活动总结
2014/06/27 职场文书
纪念九一八事变83周年国旗下讲话稿
2014/09/15 职场文书
AJAX学习笔记
2021/05/18 Javascript
python随机打印成绩排名表
2021/06/23 Python