<!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=gbk" />
<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*/
}<br>
.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="height:1800px;"></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>
<div style="padding-top: 20px;">
<input type="Submit" name="" value="显示层" onclick="javascript:showDiv()" />
</div>
</body>
</html>
- 浏览: 96931 次
- 性别:
- 来自: 北京
最新评论
-
_大大大雄:
关于这个应用, 有些东西想要请教下您行么?
jsp 权限过滤器的应用 -
jptiancai:
博主,看了博客,收获很多,这个例子运行的时候,会报下面的错误: ...
jsp 权限过滤器的应用
发表评论
-
backbone学习资料
2015-07-20 16:37 578理论知识 backbone.js 初探http://we ... -
解析目录树
2015-06-19 19:31 462<ul id="test"> ... -
csv生成
2015-06-19 19:29 580<head> <meta -
网站性能优化解决方案
2015-06-15 14:40 694最近通过查阅资料,发现了一些其他可以提高性能优化的方案1. 使 ... -
八种创建等高列布局
2015-01-04 17:11 549高度相等列在Web页面设计中永远是一个网页设计师的需求。如果 ... -
多次调用同一异步方法体会出现使用相同的属性值问题
2014-11-27 17:56 1641《一》执行同一个方法体,里面有异步的逻辑代码,如果这个异步 ... -
时间的计算
2014-11-19 14:42 551using System; namespace Be ... -
async when then
2014-11-14 11:45 631function test1(){ var def ... -
异步并行串行编程 when
2014-11-14 11:40 666var data = { "51": ... -
HTML 与javascript自解码机制
2014-02-19 14:41 1216关于这个自解码机制,我们直接以一个例子(样例0)来进行说明: ... -
三列百分之比布局
2014-02-11 13:56 620三列布局自适应 -
JSp生重复提交解决方法
2014-01-08 15:42 662看了网上的,有几种方法: 1 在你的表单页里HEAD区加入这段 ... -
AMD 和 CMD 的区别有哪些?
2013-12-25 11:37 691AMD 是 RequireJS 在推广过程中对模块定义的规范化 ... -
firefox 专属css hack
2013-12-20 15:50 660之前只有ie6、ie6、firefox时,只要写!impo ... -
自适应网页设计
2013-11-29 10:39 745一、简单描述:随着移 ... -
跨浏览器兼容性总结
2013-11-25 10:16 3424一、 CSS样式兼容 1. F ... -
IE6 PNG背景透明解决方法(汇总)
2013-10-31 18:25 621IE6 PNG背景透明解决方法(汇总) 方法一: IE6 ... -
兼容IE6 min-width 的CSS 样式
2013-10-23 19:12 826IE6另外一个bug就是它不支持 min-width 属性. ... -
IE6 position:fixed bug (固定窗口方法)
2013-10-23 17:26 740今天herb同 学在twitter上 ... -
不确定图片大小让元素水平垂直居中
2013-10-23 16:53 733<!DOCTYPE html PUBLIC " ...
相关推荐
jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果 jQuery弹出层垂直居中效果
弹出层(遮罩层)弹出页面垂直居中,一个不错的例子,可拿来使用。
div框水平垂直居中跟内容垂直居中
图片水平垂直居中 用很精简的代码,实现图片水平垂直居中 效果
图片水平垂直居中 好用 图片水平垂直居中 图片水平垂直居中 图片水平垂直居中
CSS 实现盒子水平居中、垂直居中和水平垂直居中….docx
DIV水平垂直居中,都是利用jquery实现的,很简单
Bootstrap弹出框水平居中,垂直居中
DIV+CSS水平 垂直居中.docDIV+CSS水平垂直居中
CSS解决未知高度的DIV垂直居中CSS解决未知高度的DIV垂直居中
jQuery弹出层垂直居中效果.zip
不同的浏览器对水平和垂直居中的不同体现,兼容所有浏览器的终极方法
div+css布局限制图片最大宽度图片水平垂直居中兼容IE6
NULL 博文链接:https://shoushounihao.iteye.com/blog/1955513
js实现水平垂直居中,纯js,兼容性好
垂直居中显示ie7+
这是几种图片在div层的居中方法,其中垂直居中不好实现的问题是兼容性问题,其中有兼容性不错的居中方法实例。
Horizontal vertical alignment水平垂直居中的实现方式
jquery实现让弹出层绝对居中。