js弹出的对话窗口永远保持居中显示


Posted in Javascript onDecember 15, 2012
<!DOCTYPE html> 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style type="text/css"> 
.Div_Scroll { 
position:fixed; 
margin:-10px; 
visibility:hidden; 
background-color:#808080; 
opacity:0.6; 
z-index:99; 
} 
.Div_Scroll_Content { 
position:relative; 
margin-top:20%; 
width:inherit; 
height:inherit; 
} 
.Div_AlertWindow { 
margin:auto; 
width:200px; 
height:100px; 
background-color:lightblue; 
border:5px solid #f00; 
} 
</style> 
<script type="text/javascript"> 
window.onload = function () { 
var alertWindow = $("alertParent"); 
alertWindow.style.width = window.screen.availWidth + "px"; 
alertWindow.style.height = window.screen.height + "px"; 
$("Sure").onclick = function () { 
alertWindow.style.visibility = "hidden"; 
} 
} 
function ShowAlert() { 
var alertWindow = $("alertParent"); 
alertWindow.style.visibility = "visible"; 
} 
$ = function (id) { 
return document.getElementById(id); 
} 
</script> 
</head> 
<body> 
<div id="alertParent" class="Div_Scroll"> 
<div class="Div_Scroll_Content"> 
<div id="AlertWindow" class="Div_AlertWindow"> 
<input type="button" id="Sure" value="close alert Dialog..." /> 
</div> 
</div> 
</div> 
<div style="height:1300px; padding-top:200px;" > 
<input id="alertButton" type="button" onclick="ShowAlert();" value="Show alert Dialog..."/> 
</div> 
</body> 
</html>

添加遮罩层
Javascript 相关文章推荐
基于JavaScript自定义构造函数的详解说明
Apr 24 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jquery实现表单验证简单实例演示
Nov 23 Javascript
javascript省市区三级联动下拉框菜单实例演示
Nov 29 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
Oct 11 Javascript
深入理解JavaScript定时机制
Oct 27 Javascript
bootstrap实现的自适应页面简单应用示例
Mar 09 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
Vue 通过公共字段,拼接两个对象数组的实例
Nov 07 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 #Javascript
js修改地址栏URL参数解决url参数问题
Dec 15 #Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 #Javascript
JavaScript中OnLoad几种使用方法
Dec 15 #Javascript
Javascript中自动切换焦点实现代码
Dec 15 #Javascript
treepanel动态加载数据实现代码
Dec 15 #Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
Dec 15 #Javascript
You might like
php文件上传的简单实例
2013/10/19 PHP
PHP调用.NET的WebService 简单实例
2015/03/27 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
PHP中串行化用法示例
2016/11/16 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
基于node.js的快速开发透明代理
2010/12/25 Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
2013/12/16 Javascript
js对文章内容进行分页示例代码
2014/03/05 Javascript
Nodejs中crypto模块的安全知识讲解
2018/01/03 NodeJs
webpack4 CSS Tree Shaking的使用
2018/09/03 Javascript
JavaScript的词法结构精华篇
2018/10/17 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
2018/12/20 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
小程序中设置缓存过期的实现方法
2020/01/14 Javascript
JavaScript Image对象实现原理实例解析
2020/08/26 Javascript
[56:18]VGJ.S vs Secret 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
python+pandas生成指定日期和重采样的方法
2018/04/11 Python
使用实现pandas读取csv文件指定的前几行
2018/04/20 Python
Python打开文件,将list、numpy数组内容写入txt文件中的方法
2018/10/26 Python
python实现QQ邮箱/163邮箱的邮件发送
2019/01/22 Python
Python中的引用知识点总结
2019/05/20 Python
对django后台admin下拉框进行过滤的实例
2019/07/26 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
使用PyQt的QLabel组件实现选定目标框功能的方法示例
2020/05/19 Python
python实现移动木板小游戏
2020/10/09 Python
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
董事长职责范文
2013/11/08 职场文书
爱心倡议书范文
2014/05/12 职场文书
环保倡议书100字
2014/05/15 职场文书
物理教育专业求职信
2014/06/25 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
党员“四风”问题批评与自我批评思想汇报
2014/10/06 职场文书
60条职场经典语录,总有一条能触动你的心
2019/08/21 职场文书