<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
/*弹出层的STYLE*/
html,body {height:100%; margin:0px; font-size:12px;}
.mydiv {
background-color: #ff6;
border: 1px solid #f90;
text-align: center;
line-height: 40px;
font-size: 12px;
font-weight: bold;
z-index:99;
width: 300px;
height: 120px;
left:50%;/*FF IE7*/
top: 50%;/*FF IE7*/
margin-left:-150px!important;/*FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/*FF IE7 该值为本身高的一半*/
margin-top:0px;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
.bg {
background-color: #ccc;
width: 100%;
height: 100%;
left:0;
top:0;/*FF IE7*/
filter:alpha(opacity=50);/*IE*/
opacity:0.5;/*FF*/
z-index:1;
position:fixed!important;/*FF IE7*/
position:absolute;/*IE6*/
_top: expression(eval(document.compatMode &&
document.compatMode=='CSS1Compat') ?
documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
}
/*The END*/
</style>
<script type="text/javascript">
function showDiv(){
document.getElementById('popDiv').style.display='block';
document.getElementById('bg').style.display='block';
}
function closeDiv(){
document.getElementById('popDiv').style.display='none';
document.getElementById('bg').style.display='none';
}
</script>
</head>
<body>
<div style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
</div>
<div id="popDiv" class="mydiv" style="display:none;">恭喜你!<br/>你的成绩为:60分<br/>
<a href="javascript:closeDiv()">关闭窗口</a></div>
<div id="bg" class="bg" style="display:none;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</body>
</html>
分享到:
相关推荐
Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!
弹出居中DIV窗口,背景逐渐变暗,可以在调用时直接定义窗口的大小
js+CSS实现弹出居中背景半透明div层的方法.docx
jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果
jquery实现让弹出层绝对居中。
js弹出层居中可移动 js弹出层居中可移动
弹出层(遮罩层)弹出页面垂直居中,一个不错的例子,可拿来使用。
js弹出层绝对居中(ie,火狐都支持)在不同浏览器上显示效果一样
1. 弹出绝对居中层 2. 企业级应用标准,支持SharePoint 3. 基于ASP.ENT, JavaScript, CSS开发
NULL 博文链接:https://shoushounihao.iteye.com/blog/1955513
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间
JQuery 弹出层,div始终显示在屏幕正中间
DIV始终居中的半透明弹出层.rarDIV始终居中的半透明弹出层.rarDIV始终居中的半透明弹出层.rar
点击弹出窗口层,并且背景变暗渐变.htm 设定时间弹出窗口.htm 打开一个窗口在一定的时间内自动关闭.htm 只在关闭窗口的时候提示,刷新的时候不提示.htm 离开时转跳到指定网址.htm 随同主窗口同时弹出的附加小窗口....
有js+css和jquery+css实现的弹出居中的遮罩层,兼容IE6 7 8 和ff
jQuery.UI.Impromptu.js jQuery 弹出层 浮动层 提示框 并随页面滚动而滚动 实现弹出层不再难,只要引用jQuery.UI.Impromptu.js这个js文件后,想要弹出哪个tag都行了 如:我想要这里是弹出浮动遮罩层</div> 并随页面...
弹出层遮罩层效果(包括居中、不随滚动条滚动)
Bootstrap弹出框水平居中,垂直居中
很实用的弹出div居中效果,代码简洁,修改灵活。适合新手使用。一看即懂。
遮罩弹出层 ; charset=utf-8" /> <title>jquery弹出层鼠标点击弹出层可浮动在...弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间。jquery下载。" /> </head>