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 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
js Event对象的5种坐标
Sep 12 Javascript
关于jquery input textare 事件绑定及用法学习
Apr 03 Javascript
jquery固定底网站底部菜单效果
Aug 13 Javascript
JavaScript onkeypress事件入门实例(按下或按住一个键盘按键)
Oct 17 Javascript
JS实现从网页顶部掉下弹出层效果的方法
Aug 06 Javascript
如何检测JavaScript的各种类型
Jul 30 Javascript
利用JS实现简单的日期选择插件
Jan 23 Javascript
Node.js与Sails redis组件的使用教程
Feb 14 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
100行代码实现一个vue分页组功能
Nov 06 Javascript
JSX在render函数中的应用详解
Sep 04 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 xfocus防注入资料
2008/04/27 PHP
PHP 事件机制(2)
2011/03/23 PHP
php获取从html表单传递数组的方法
2015/03/20 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
php实现点击可刷新验证码
2015/11/07 PHP
thinkPHP自动验证、自动添加及表单错误问题分析
2016/10/17 PHP
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
PHP Laravel中的Trait使用方法
2019/01/20 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
?牟┛途W扣了一??效果出?? target=
2007/05/27 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
JavaScript判断文件上传类型的方法
2014/09/02 Javascript
JavaScript获取图片像素颜色并转换为box-shadow显示
2016/03/11 Javascript
原生js仿浏览器滚动条效果
2017/03/02 Javascript
vue组件创建的三种方式小结
2020/02/03 Javascript
JavaScript实现放大镜效果代码示例
2020/04/29 Javascript
原生JavaScript实现弹幕组件的示例代码
2020/10/12 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
进一步理解Python中的函数编程
2015/04/13 Python
Python中用post、get方式提交数据的方法示例
2017/09/22 Python
Python3.6连接Oracle数据库的方法详解
2018/05/18 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
python利用Opencv实现人脸识别功能
2019/04/25 Python
python移位运算的实现
2019/07/15 Python
使用python执行shell脚本 并动态传参 及subprocess的使用详解
2020/03/06 Python
Python如何截图保存的三种方法(小结)
2020/09/01 Python
一些关于MySql加速和优化的面试题
2014/01/30 面试题
学生自我评价范文
2014/02/02 职场文书
运动会横幅标语
2014/06/17 职场文书
小学社会实践活动总结
2014/07/03 职场文书
承诺书模板
2014/08/30 职场文书
初中中等生评语
2014/12/29 职场文书
青年志愿者活动感想
2015/08/07 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书