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 相关文章推荐
jquery 批量上传图片实现代码
Jan 28 Javascript
javascript preload&amp;lazy load
May 13 Javascript
简短几句 通俗解释javascript的闭包
Jan 17 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
JavaScript对象数组排序函数及六个用法
Dec 23 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
jQuery实现微信长按识别二维码功能
Aug 26 Javascript
理解JavaScript原型链
Oct 25 Javascript
JS实现HTML标签转义及反转义
Apr 14 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
基于vue-upload-component封装一个图片上传组件的示例
Oct 16 Javascript
基于javascript处理nginx请求过程详解
Jul 07 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
php下的权限算法的实现
2007/04/28 PHP
PHP CLI模式下的多进程应用分析
2013/06/03 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
php通过递归方式复制目录和子目录的方法
2015/03/13 PHP
解决laravel 表单提交-POST 异常的问题
2019/10/15 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
jQuery在iframe中无法弹出对话框的解决方法
2014/01/12 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
jQuery toggleClass应用实例(附效果图)
2014/04/06 Javascript
AngularJS单选框及多选框实现双向动态绑定
2016/01/13 Javascript
JS实现的手机端精简幻灯片效果
2016/09/05 Javascript
jQuery获取this当前对象子元素对象的方法
2016/11/29 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
vue实现滑动到底部加载更多效果
2020/10/27 Javascript
vue 实现购物车总价计算
2019/11/06 Javascript
Python类方法__init__和__del__构造、析构过程分析
2015/03/06 Python
Python内置函数OCT详解
2016/11/09 Python
在python中利用KNN实现对iris进行分类的方法
2018/12/11 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
python+requests接口自动化框架的实现
2020/08/31 Python
详解pytorch中squeeze()和unsqueeze()函数介绍
2020/09/03 Python
Python Charles抓包配置实现流程图解
2020/09/29 Python
聊聊python在linux下与windows下导入模块的区别说明
2021/03/03 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
关于canvas绘制模糊问题的解决方法
2019/09/24 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
会计自我鉴定
2013/11/02 职场文书
个人教师自我评价范文
2013/12/02 职场文书
母亲节演讲稿
2014/05/27 职场文书
网络技术专业求职信
2014/07/13 职场文书
绿色环保家庭事迹材料
2014/08/31 职场文书
关于运动会广播稿200字
2014/10/08 职场文书
研究生个人学年总结
2015/02/14 职场文书
老乡会致辞
2015/07/28 职场文书
Go 通过结构struct实现接口interface的问题
2021/10/05 Golang