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 仿关机效果的图片层
Dec 26 Javascript
读jQuery之四(优雅的迭代)
Jun 20 Javascript
利用了jquery的ajax实现二级联互动菜单
Dec 02 Javascript
全面接触神奇的Bootstrap导航条实战篇
Aug 01 Javascript
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
Aug 31 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
js中用cssText设置css样式的简单方法
Sep 19 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
微信小程序实现刷脸登录
May 25 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
Mar 26 Javascript
JavaScript声明变量和数据类型的转换
Apr 12 Javascript
避坑之 JavaScript 中的toFixed()和正则表达式
Apr 19 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之第七天
2006/10/09 PHP
浅谈PHP与C#的值类型指向区别的详解
2013/05/21 PHP
php数组添加与删除单元的常用函数实例分析
2015/02/16 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
php简单的上传类分享
2016/05/15 PHP
PHP检测接口Traversable用法详解
2017/12/29 PHP
laravel 5.3 单用户登录简单实现方法
2019/10/14 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
js Form.elements[i]的使用实例
2011/11/13 Javascript
js函数模拟显示桌面.scf程序示例
2014/04/20 Javascript
使用不同的方法结合/合并两个JS数组
2014/09/18 Javascript
第五章之BootStrap 栅格系统
2016/04/25 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
js与jquery正则验证电子邮箱、手机号、邮政编码的方法
2016/07/04 Javascript
BootStrap栅格系统、表单样式与按钮样式源码解析
2017/01/20 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
前端天气插件tpwidget使用方法详解
2019/06/24 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
微信小程序实现吸顶效果
2020/01/08 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
python登录豆瓣并发帖的方法
2015/07/08 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
多版本python的pip 升级后, pip2 pip3 与python版本失配解决方法
2019/09/11 Python
python 字典有序并写入json文件过程解析
2019/09/30 Python
keras在构建LSTM模型时对变长序列的处理操作
2020/06/29 Python
高校辅导员推荐信范文
2013/12/25 职场文书
文员求职信
2014/07/15 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
保证书格式
2015/01/16 职场文书
一年级语文上册复习计划
2015/01/17 职场文书
出纳岗位职责范本
2015/03/31 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
一文简单了解MySQL前缀索引
2022/04/03 MySQL