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的$.cookie()实现跨越页面tabs导航实现代码
Mar 03 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
js实现使用鼠标拖拽切换图片的方法
May 04 Javascript
javascript白色简洁计算器
May 04 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
Jul 01 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
Oct 28 Javascript
原生javascript实现的ajax异步封装功能示例
Nov 03 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
three.js中文文档学习之通过模块导入
Nov 20 Javascript
JS控制鼠标拒绝点击某一按钮的实例
Dec 29 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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中“简单工厂模式”实例代码讲解
2012/09/04 PHP
php实现约瑟夫问题的方法小结
2015/03/23 PHP
PHP可变函数学习小结
2015/11/29 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
PHP使用token防止表单重复提交的方法
2016/04/07 PHP
PHP的mysqli_select_db()函数讲解
2019/01/23 PHP
laravel实现前后台路由分离的方法
2019/10/13 PHP
Javascript select下拉框操作常用方法
2009/11/09 Javascript
javascript定义函数的方法
2010/12/06 Javascript
Jquery提交表单 Form.js官方插件介绍
2012/03/01 Javascript
两个数组去重的JS代码
2013/12/04 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
Jquery弹出层插件ThickBox的使用方法
2014/12/09 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
微信小程序实现留言板
2018/10/31 Javascript
js指定日期增加指定月份的实现方法
2018/12/19 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
[03:40]2014DOTA2国际邀请赛 B神专访:躲箭真的很难
2014/07/13 DOTA
[51:32]Optic vs Serenity 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python k-近邻算法实例分享
2014/06/11 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
浅谈pymysql查询语句中带有in时传递参数的问题
2020/06/05 Python
html5的localstorage详解
2017/05/09 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
集团公司总经理岗位职责
2013/12/20 职场文书
《草虫的村落》教学反思
2014/02/16 职场文书
大学生自我评价范文分享
2014/02/21 职场文书
电话营销开场白
2015/05/29 职场文书
2015年库房管理工作总结
2015/10/14 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
python使用pymysql模块操作MySQL
2021/06/16 Python
Redis入门基础常用操作命令整理
2022/06/01 Redis