js与css实现弹出层覆盖整个页面的方法
2014-12-13 11:18
701 查看
本文实例讲述了js与css实现弹出层覆盖整个页面的方法。分享给大家供大家参考。具体实现方法如下:
弹出层透明背景加框的常用样式和结构如下:
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
.alertMessageDivBorder{
position:fixed;
_position:absolute;
width:750px;
height:370px;
left:50%;
top:50%;
margin:-185px 0 0 -375px;
background:#000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
z-index:98;
display:none;
}
.alertMessageDiv{
position:fixed;
_position:absolute;
width:730px;
height:350px;
left:50%;
top:50%;
margin:-175px 0 0 -365px;
background:#fff;
z-index:99;
display:none;
font-size:14px;
}
<div class="alertMessageBg"></div>
<div class="alertMessageDivBorder"></div>
<div class="alertMessageDiv"></div>
弹出层背景覆盖整个网页的方法
1.css方法
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
2.js方法
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
var bgWidth = document.body.clientWidth + 'px',
bgHeight = document.body.clientHeight + 'px',
alertBgNode = $('.alertMessageBg');
alertBgNode.css({'width':bgWidth,'height':bgHeight});
对比以上两种方法,显然css方法更省事,尤其在不用兼容ie6的现在。
希望本文所述对大家基于JS的web程序设计有所帮助。
您可能感兴趣的文章:
- js写一个弹出层并锁屏效果实现代码
- js实现div弹出层的方法
- 使用js实现关闭js弹出层的窗口
- js 点击页面其他地方关闭弹出层(示例代码)
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
- Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
- Js Jquery创建一个弹出层可加载一个页面
- html+javascript实现可拖动可提交的弹出层对话框效果
- js弹出层永远居中实现思路及代码
- js弹出层(jQuery插件形式附带reLoad功能)
- js setTimeout实现延迟关闭弹出层
- MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
- JS实现的添加弹出层并完成锁屏操作示例
相关文章推荐
- js与css实现弹出层覆盖整个页面的方法
- JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
- 弹出层覆盖整个页面方法
- JS+CSS实现Div弹出窗口同时背景变暗的方法
- JS实现刷新父页面不弹出提示框的方法
- js关闭当前页面不弹出提示的方法 js实现浏览器的各种菜单命令
- js+CSS实现弹出居中背景半透明div层的方法
- JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
- CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
- JS+CSS实现实用的单击输入框弹出选择框的方法
- 纯js+css实现 页面弹出div
- JS+CSS实现Div弹出窗口同时背景变暗的方法
- CSS+JS实现点击文字弹出定时自动关闭DIV层菜单的方法
- js+css控制弹出小窗口之后,后整个页面背景图变色,并且不可操作,点击确定,页面跳转。。。
- JS+CSS实现带关闭按钮DIV弹出窗口的方法
- 逻辑思路实现弹出框背景颜色覆盖整个页面小细节
- JS实现刷新父页面不弹出提示框的方法
- js+CSS实现弹出居中背景半透明div层的方法
- 结合jQuery的unload方法实现JS退出页面弹出对话框
- JS+CSS实现Div弹出窗口同时背景变暗的方法