JS 弹出层定位至屏幕居中

<!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*/

}

.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*/

}
/*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 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>

JS 弹出层定位至屏幕居中的更多相关文章

js弹出层
js弹出层 1.div附近显示 <div id="message"></div> $().delay().hide(); 2.遮罩层表单提交后遮住页面,等 ...
js 弹出层，以及在javascript里定义层样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Js弹出层，弹出框代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jquery.blockUI.2.31.js 弹出层项目介绍
{insert_scripts files='user.js'} <style type="text/css"> #float_login{border:1px sol ...
JS弹出层遮罩,隐藏背景页面滚动条细节优化
做过弹层组件的童鞋应该都考虑过特殊情况下取消页面滚动条,让其不能滚动,这样用户体验会好很多,当弹层内容超出屏幕展现范围的时候在弹层上面增加滚动条来查看全部内容. 一.去除滚动条方法给body添加ove ...
简单 JS 弹出层背景变暗
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
在Vue中使用layer.js弹出层插件
layer.js(mobile)是一个小巧方便的弹出层插件,在之前的apicloud项目中被大量使用,但最近对apicloud的IDE.非常不友好的文档和极低的开发效率深感厌烦,决定弃用然后转向Vue ...
JS弹出层制作，以及移动端禁止弹出层下内容滚动，overflow:hidden移动端失效问题
HTML <div class="layer"> <div class="menu-list"> <span>社会</ ...
div+js 弹出层
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <t ...

随机推荐

android 在代码中使用 #ffffff 模式设置背景色
differentsum.setBackgroundColor(Color.parseColor("#F3733F"));
create a new table for the query results
http://stackoverflow.com/questions/2698401/how-to-store-mysql-query-results-in-another-table CREATE ...
cakephp 的query方法，直接写在controller中是否有点不合适
模型的query()函数有时是非常实用的,它可以在任何需要数据的地方执行SQL语句.但不是在什么地方调用query()方法都是恰当的.特别是在控制器中直接调用模型的query()方法 $this-&g ...
UITableviewCell 重用内存
转载自:http://www.cnblogs.com/tangbinblog/p/3371545.html 重用实现分析查看UITableView头文件,会找到NSMutableArray* vi ...
Copy-->Mutable Copy
一.深拷贝和浅拷贝深拷贝:对象拷贝 - 直接拷贝内容. 浅拷贝:指针拷贝 - 将指针中的地址值拷贝一份. 二.对于 Copy 与 mutableCopy 的实践思路:我用四个方案来验证 Copy ...
UML类图基本画法
转自:http://www.cnblogs.com/import-this/p/5330501.html 1. 类类包括属性方法下图的生命就是属性代谢就是方法 2.基本关系 a.泛化(Gener ...
JAVA基础-多态
多态 polymophism: 动态绑定, 迟绑定, 指在执行期间(java), 而不是编译期间(javac), 判断所引用对象的实际类型, 根据实际类型调用响应的方法. 3个条件: 1. 继承 2. ...
jdb
http://herongyang.com/jtool/jdb.html http://www.rhcedan.com/2010/06/22/killing-a-java-thread/ 用处:上去杀 ...
STM32之FreeRTOS
STM32之FreeRTOS http://www.freertos.org/index.html http://www.freertos.org/a00090.html#ST http://www. ...
jquery如何判断元素是否被点击_百度知道
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <div id="parent"> <a id="a1" ...

JS 弹出层 定位至屏幕居中

JS 弹出层 定位至屏幕居中的更多相关文章

随机推荐

热门专题

JS 弹出层定位至屏幕居中

JS 弹出层定位至屏幕居中的更多相关文章