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 相关文章推荐
基本jquery的控制tabs打开的数量的代码
Oct 17 Javascript
Javascript合并表格中具有相同内容单元格示例
Aug 11 Javascript
div+css+js实现无缝滚动类似marquee无缝滚动兼容firefox
Aug 29 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
jQuery实现百叶窗焦点图动画效果代码分享(附源码下载)
Mar 14 Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
Jan 04 Javascript
移动端界面的适配
Jan 11 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
微信小程序实现多选功能
Nov 04 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
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
php xml实例 留言本
2009/03/20 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
个人写的PHP验证码生成类分享
2014/08/21 PHP
php获得网站访问统计信息类Compete API用法实例
2015/04/02 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
js使下拉列表框可编辑不止是选择
2013/12/12 Javascript
jQuery中delegate与on的用法与区别示例介绍
2013/12/20 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
JavaScript中this详解
2015/09/01 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
在create-react-app中使用css modules的示例代码
2018/07/31 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
Python下载懒人图库JavaScript特效
2015/05/28 Python
Python中return语句用法实例分析
2015/08/04 Python
老生常谈Python基础之字符编码
2017/06/14 Python
使用pandas对两个dataframe进行join的实例
2018/06/08 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
通过python的matplotlib包将Tensorflow数据进行可视化的方法
2019/01/09 Python
Python处理session的方法整理
2019/08/29 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
python爬虫爬取某网站视频的示例代码
2021/02/20 Python
合作经营协议书
2014/04/17 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
解除劳动合同证明书
2014/09/26 职场文书
企业法人代表证明书
2014/09/27 职场文书
2015毕业寄语大全
2015/02/26 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
哪类餐饮行业,最适合在高校创业?
2019/08/19 职场文书
Python爬取科目四考试题库的方法实现
2021/03/30 Python
css3属性选择器 “~”(波浪号) “,”(逗号) “+”(加号)和 “>”(大于号)
2022/04/19 HTML / CSS