JS 弹出层 定位至屏幕居中示例


Posted in Javascript onMay 21, 2014
<!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*/ 
_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 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>
Javascript 相关文章推荐
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
AnglarJs中的上拉加载实现代码
Feb 08 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
小程序登录态管理的方法示例
Nov 13 Javascript
jsonp跨域获取百度联想词的方法分析
May 13 Javascript
关于Layui Table隐藏列问题
Sep 16 Javascript
微信小程序关键字变色实现代码实例
Dec 13 Javascript
vue学习笔记之slot插槽基本用法实例分析
Feb 01 Javascript
vue 动态生成拓扑图的示例
Jan 03 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
Jquery实现的角色左右选择特效
May 21 #Javascript
jquery $.trim()方法使用介绍
May 21 #Javascript
JS控制输入框内字符串长度
May 21 #Javascript
javascript学习笔记之10个原生技巧
May 21 #Javascript
jquery实现预览提交的表单代码分享
May 21 #Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 #Javascript
Jquery图片延迟加载插件jquery.lazyload.js的使用方法
May 21 #Javascript
You might like
重置版宣传动画
2020/04/09 魔兽争霸
PHP字符串长度计算 - strlen()函数使用介绍
2013/10/15 PHP
php处理json格式数据经典案例总结
2016/05/19 PHP
php 使用mpdf实现指定字段配置字体样式的方法
2019/07/29 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
编写针对IE的JS代码两种编写方法
2013/01/30 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
js之事件冒泡和事件捕获详细介绍
2013/10/28 Javascript
AngularJS动态加载模块和依赖的方法分析
2016/11/08 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
jQuery实现广告条滚动效果
2017/08/22 jQuery
js防刷新的倒计时代码 js倒计时代码
2017/09/06 Javascript
浅谈vue+webpack项目调试方法步骤
2017/09/11 Javascript
详解小程序循环require之坑
2019/03/08 Javascript
nodejs中实现修改用户路由功能
2019/05/24 NodeJs
解决layui批量传值到后台操作时出现传值为空的问题
2019/09/28 Javascript
Vue使用CDN引用项目组件,减少项目体积的步骤
2020/10/30 Javascript
Perl中著名的Schwartzian转换问题解决实现
2015/06/02 Python
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python+Wordpress制作小说站
2017/04/14 Python
Python常见异常分类与处理方法
2017/06/04 Python
Python基于回溯法子集树模板解决野人与传教士问题示例
2017/09/11 Python
Python创建对称矩阵的方法示例【基于numpy模块】
2017/10/12 Python
python 巧用正则寻找字符串中的特定字符的位置方法
2018/05/02 Python
python画图把时间作为横坐标的方法
2019/07/07 Python
Python使用python-docx读写word文档
2019/08/26 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
HTTP状态码详解
2021/03/18 杂记
使用CSS3实现input多选框自定义样式的方法示例
2019/07/19 HTML / CSS
美国顶级奢侈茶:Mighty Leaf Tea(美泰茶)
2016/11/26 全球购物
化石印度尼西亚在线商店:Fossil Indonesia
2019/03/11 全球购物
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
将一个文本文件的内容按倒序打印出来
2015/01/05 面试题
保安的辞职报告怎么写
2014/01/20 职场文书
教师节促销活动方案
2014/02/14 职场文书
法律服务所工作总结
2015/08/10 职场文书