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模拟select下拉框的简单示例代码
Jan 26 Javascript
javascript时间函数大全
Jun 30 Javascript
Js实现网页键盘控制翻页的方法
Oct 30 Javascript
JavaScript中的闭包(Closure)详细介绍
Dec 30 Javascript
JS获得选取checkbox整行数据的方法
Jan 28 Javascript
BootStrap fileinput.js文件上传组件实例代码
Feb 20 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
Kindeditor单独调用多图上传实例
Jul 31 Javascript
javascript简写常用的12个技巧(可以大大减少你的js代码量)
Mar 28 Javascript
浅析Vue 生命周期
Jun 21 Javascript
vue侧边栏动态生成下级菜单的方法
Sep 07 Javascript
JSX在render函数中的应用详解
Sep 04 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
我的论坛源代码(六)
2006/10/09 PHP
php实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
php判断页面是否是微信打开的示例(微信打开网页)
2014/04/25 PHP
PHP获取当前相对于域名目录的方法
2015/06/26 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
脚本之家贴图转换+转贴工具用到的js代码超级推荐
2007/04/05 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
jquery 单引号和双引号的区别及使用注意
2013/07/31 Javascript
js解析json读取List中的实体对象示例
2014/03/11 Javascript
js 实现浏览历史记录示例
2014/04/20 Javascript
浅谈JavaScript实现面向对象中的类
2014/12/09 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
ClearTimeout消除闪动实例代码
2016/02/29 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
node.js实现博客小爬虫的实例代码
2016/10/08 Javascript
vue.js绑定class和style样式(6)
2016/12/09 Javascript
AngularJS封装指令方法详解
2016/12/12 Javascript
Python打印斐波拉契数列实例
2015/07/07 Python
matplotlib调整子图间距,调整整体空白的方法
2018/08/03 Python
python爬取淘宝商品销量信息
2018/11/16 Python
python 下载文件的多种方法汇总
2020/11/17 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
html5自定义video标签的海报与播放按钮功能
2019/12/04 HTML / CSS
AURALog面试题软件测试方面
2013/10/22 面试题
大学生素质拓展活动方案
2014/02/11 职场文书
小学德育工作经验交流材料
2014/05/22 职场文书
高中美术教师事迹材料
2014/08/22 职场文书
机电专业毕业生自我鉴定2014
2014/10/04 职场文书
2014年社区教育工作总结
2014/12/02 职场文书
社区党风廉政建设调研报告
2015/01/01 职场文书
2015年学校体育工作总结
2015/04/22 职场文书
导游词之重庆钓鱼城
2019/09/19 职场文书
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
利用正则表达式匹配浮点型数据
2022/05/30 Java/Android