js写一个弹出层并锁屏效果实现代码


Posted in Javascript onDecember 07, 2012
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>一个弹出层并锁屏效果</title> 
</head> 
<body> 
<div> 
<div> 
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p> 
<p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p><p>测试</p> 
<input type="button" value="点击这里" onClick="sAlert('测试弹出层并锁屏效果');" /> 
</div> 
</div> 
<script language="javascript"> 
function sAlert(str) 
{ 
var msgw,msgh,bordercolor; 
msgw=400;//提示窗口的宽度 
msgh=100;//提示窗口的高度 
titleheight=25 //提示窗口标题高度 
bordercolor="#336699";//提示窗口的边框颜色 
titlecolor="#99CCFF";//提示窗口的标题颜色 
var sWidth,sHeight; 
sWidth=document.body.offsetWidth;//获取窗口宽度 
sHeight=screen.height;//获取屏幕高度 
var bgObj=document.createElement("div");//关键在这里,原理:在body中创建一个div,并将其宽度与高度设置为覆盖整个窗体,如此一来就无法对其它窗口时行操作 
bgObj.setAttribute('id','bgDiv'); 
bgObj.style.position="absolute"; 
bgObj.style.top="0"; 
bgObj.style.background="#777"; 
bgObj.style.filter="progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75"; 
bgObj.style.opacity="0.6"; 
bgObj.style.left="0"; 
bgObj.style.width=sWidth + "px"; 
bgObj.style.height=sHeight + "px"; 
bgObj.style.zIndex = "10000"; 
document.body.appendChild(bgObj);//设置完此div后将其显示出来 
var msgObj=document.createElement('div');//创建一个消息窗口 
msgObj.setAttribute("id","msgDiv"); 
msgObj.setAttribute("align","center"); 
msgObj.style.background="white"; 
msgObj.style.border="1px solid " + bordercolor; 
msgObj.style.position = "absolute"; 
msgObj.style.left = "50%"; 
msgObj.style.top = "50%"; 
msgObj.style.font="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif"; 
msgObj.style.marginLeft = "-225px" ; 
msgObj.style.marginTop = -75+document.documentElement.scrollTop+"px"; 
msgObj.style.width = msgw+"px"; 
msgObj.style.height = msgh+"px"; 
msgObj.style.textAlign = "center"; 
msgObj.style.lineHeight ="25px"; 
msgObj.style.zIndex = "10001"; 
var title=document.createElement("h4"); //创建一个标题,以备放置在消息层 
title.setAttribute("id","msgTitle"); 
title.setAttribute("align","right"); 
title.style.margin="0"; 
title.style.padding="3px"; 
title.style.background=bordercolor; 
title.style.filter="progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);"; 
title.style.opacity="0.75"; 
title.style.border="1px solid " + bordercolor; 
title.style.height="18px"; 
title.style.font="12px Verdana, Geneva, Arial, Helvetica, sans-serif"; 
title.style.color="white"; 
title.style.cursor="pointer"; 
title.innerHTML="关闭"; 
title.onclick=function() 
{ 
document.body.removeChild(bgObj);//移除覆盖整个窗口的div层 
document.getElementById("msgDiv").removeChild(title);//移除标题 
document.body.removeChild(msgObj);//移除消息层 
} 
document.body.appendChild(msgObj); 
document.getElementById("msgDiv").appendChild(title); 
var txt=document.createElement("p"); 
txt.style.margin="1em 0" 
txt.setAttribute("id","msgTxt"); 
txt.innerHTML=str; 
document.getElementById("msgDiv").appendChild(txt); 
} 
</script> 
</body> 
</html>
Javascript 相关文章推荐
In Javascript Class, how to call the prototype method.(three method)
Jan 09 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
Aug 01 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
jquery获取一组checkbox的值(实例代码)
Nov 04 Javascript
jQuery修改li下的样式以及li下的img的src的值的方法
Nov 02 Javascript
浅谈Javascript数组索引
Jul 29 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
Dec 26 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
AngularJS 实现购物车全选反选功能
Oct 24 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
Dec 07 #Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
Dec 07 #Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
Dec 06 #Javascript
php图像生成函数之间的区别分析
Dec 06 #Javascript
javascript SpiderMonkey中的函数序列化如何进行
Dec 05 #Javascript
javascript中有趣的反柯里化深入分析
Dec 05 #Javascript
js multiple全选与取消全选实现代码
Dec 04 #Javascript
You might like
MySQL 日期时间函数常用总结
2012/06/12 PHP
php页面消耗内存过大的处理办法
2013/03/18 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP结合jQuery实现找回密码
2015/07/22 PHP
PHP 根据key 给二维数组分组
2016/12/09 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
父子窗体间传递JSON格式的数据的代码
2010/12/25 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
2015/04/28 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
2018/04/27 Javascript
解决axios会发送两次请求,有个OPTIONS请求的问题
2018/10/25 Javascript
vue通过数据过滤实现表格合并
2020/11/30 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
2020/10/14 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
JS中箭头函数与this的写法和理解
2021/01/14 Javascript
[04:50]DOTA2亚洲邀请赛小组赛第四日 TOP10精彩集锦
2015/02/02 DOTA
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
Python 内置函数进制转换的用法(十进制转二进制、八进制、十六进制)
2018/04/30 Python
Python面向对象类的继承实例详解
2018/06/27 Python
使用python中的in ,not in来检查元素是不是在列表中的方法
2018/07/06 Python
django如何自己创建一个中间件
2019/07/24 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
keras的三种模型实现与区别说明
2020/07/03 Python
Linux安装Python3如何和系统自带的Python2并存
2020/07/23 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
路易威登和香奈儿手袋:LuxeDH
2017/01/12 全球购物
Puma印度官网:德国运动品牌
2019/10/06 全球购物
自我鉴定怎么写
2014/01/12 职场文书
安全大检查实施方案
2014/02/22 职场文书
后勤服务中心总经理工作职责
2014/03/03 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
政协委员个人总结
2015/03/03 职场文书
2016领导干部廉洁自律心得体会
2016/01/13 职场文书