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 相关文章推荐
jquery删除ID为sNews的tr元素的内容
Apr 10 Javascript
JavaScript实现找出数组中最长的连续数字序列
Sep 03 Javascript
使用js画图之饼图
Jan 12 Javascript
jquery判断复选框是否选中进行答题提示特效
Dec 10 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
Node.js Sequelize如何实现数据库的读写分离
Oct 23 Javascript
微信小程序 require机制详解及实例代码
Dec 14 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 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
支持oicq头像的留言簿(一)
2006/10/09 PHP
php编写一个简单的路由类
2011/04/13 PHP
php 定界符格式引起的错误
2011/05/24 PHP
深入PHP5中的魔术方法详解
2013/06/17 PHP
PHP连接MySQL查询结果中文显示乱码解决方法
2013/10/25 PHP
php使用百度天气接口示例
2014/04/22 PHP
PHP支付系统设计与典型案例分享
2016/08/02 PHP
yii2使用GridView实现数据全选及批量删除按钮示例
2017/03/01 PHP
刷新时清空文本框内容的js代码
2007/04/23 Javascript
不使用中间变量,交换int型的 a, b两个变量的值。
2010/10/29 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
jQuery判断密码强度实现思路及代码
2013/04/24 Javascript
单元选择合并变色示例代码
2014/05/26 Javascript
JS+CSS实现模仿浏览器网页字符查找功能的方法
2015/02/26 Javascript
JS HTML5实现拖拽移动列表效果
2020/08/27 Javascript
功能强大的jquery.validate表单验证插件
2016/11/07 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
原生js实现俄罗斯方块
2020/10/20 Javascript
Apache如何部署django项目
2017/05/21 Python
Python连接phoenix的方法示例
2017/09/29 Python
Python交互环境下实现输入代码
2018/06/22 Python
在Django admin中编辑ManyToManyField的实现方法
2019/08/09 Python
Python使用进程Process模块管理资源
2020/03/05 Python
Python requests HTTP验证登录实现流程
2020/11/05 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
Vans英国官方网站:美国南加州的原创极限运动潮牌
2017/01/20 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
JAVA程序员面试题
2012/10/03 面试题
2015年推普周活动方案
2015/05/06 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang
PyTorch 如何检查模型梯度是否可导
2021/06/05 Python
MySQL如何使备份得数据保持一致
2022/05/02 MySQL
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python