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 相关文章推荐
js 解决“options为空或不是对象”
Dec 22 Javascript
JS实现固定在右下角可展开收缩DIV层的方法
Feb 13 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JavaScript实现广告的关闭与显示效果实例
Jul 02 Javascript
Bootstrap导航条的使用和理解3
Dec 14 Javascript
使用微信内嵌H5网页解决JS倒计时失效问题
Jan 13 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
JavaScript实现计数器基础方法
Oct 10 Javascript
解析Vue2 dist 目录下各个文件的区别
Nov 22 Javascript
详解vue使用$http服务端收不到参数
Apr 19 Javascript
原生js代码能实现call和bind吗
Jul 31 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
zend framework多模块多布局配置
2011/02/26 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
Swoole源码中如何查询Websocket的连接问题详解
2020/08/30 PHP
discuz论坛更换域名,详细文件修改步骤
2020/12/09 PHP
JQuery 无废话系列教程(一) jquery入门 [推荐]
2009/06/23 Javascript
Mootools 1.2教程 Tooltips
2009/09/15 Javascript
JavaScript实现拼音排序的方法
2012/11/20 Javascript
浅析jQuery Ajax通用js封装
2016/06/22 Javascript
微信小程序 wx.request(OBJECT)发起请求详解
2016/10/13 Javascript
详谈表单格式化插件jquery.serializeJSON
2017/06/23 jQuery
jQuery实现合并表格单元格中相同行操作示例
2019/01/28 jQuery
浅谈vuex为什么不建议在action中修改state
2020/02/02 Javascript
vuex中store存储store.commit和store.dispatch的用法
2020/07/24 Javascript
[36:54]Mineski vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
Python+django实现文件上传
2016/01/17 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
Python 中的lambda函数介绍
2018/10/10 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python 实现将文件或文件夹用相对路径打包为 tar.gz 文件的方法
2019/06/10 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
flask 框架操作MySQL数据库简单示例
2020/02/02 Python
Python Tornado核心及相关原理详解
2020/06/24 Python
Python自动发送和收取邮件的方法
2020/08/12 Python
Python用access判断文件是否被占用的实例方法
2020/12/17 Python
html2 canvas生成清晰的图片实现打印功能
2019/09/23 HTML / CSS
linux面试题参考答案(11)
2016/11/26 面试题
报到证丢失证明
2014/01/11 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
2015年大学班主任工作总结
2015/04/30 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js
Linux服务器离线安装 nginx的详细步骤
2022/06/16 Servers