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 相关文章推荐
可以支持多中格式的JS键盘
May 02 Javascript
javascript instanceof 内部机制探析
Oct 15 Javascript
单击按钮显示隐藏子菜单经典案例
Jan 04 Javascript
回车直接实现点击某按钮的效果即触发单击事件
Feb 27 Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
javascript设计模式之模块模式学习笔记
Feb 15 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
自定义类似于jQuery UI Selectable 的Vue指令v-selectable
Aug 23 jQuery
浅谈Vuex@2.3.0 中的 state 支持函数申明
Nov 22 Javascript
vue-element-admin 菜单标签失效的解决方式
Nov 12 Javascript
uni-app使用微信小程序云函数的步骤示例
May 22 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 图像尺寸调整代码
2010/05/26 PHP
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
PHP和JAVA中的重载(overload)和覆盖(override) 介绍
2012/03/01 PHP
PHP实现bitmap位图排序与求交集的方法
2016/07/28 PHP
PHP CURL实现模拟登陆并上传文件操作示例
2020/01/02 PHP
在IE下获取object(ActiveX)的Param的代码
2009/09/15 Javascript
再谈javascript图片预加载技术(详细演示)
2011/03/12 Javascript
javascript闭包入门示例
2014/04/30 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
js改变透明度实现轮播图的算法
2020/08/24 Javascript
利用jquery实现实时更新歌词的方法
2017/01/06 Javascript
jQuery插件zTree实现获取一级节点数据的方法
2017/03/08 Javascript
easyui关于validatebox实现多重规则验证的方法(必看)
2017/04/12 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
js单页hash路由原理与应用实战详解
2017/08/14 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
解决在Vue中使用axios用form表单出现的问题
2019/10/30 Javascript
python实现识别相似图片小结
2016/02/22 Python
Python实现动态加载模块、类、函数的方法分析
2017/07/18 Python
浅谈pandas中shift和diff函数关系
2018/04/08 Python
浅谈python之高阶函数和匿名函数
2019/03/21 Python
Python对Excel按列值筛选并拆分表格到多个文件的代码
2019/11/05 Python
PyCharm最新激活码(2020/10/27全网最新)
2020/10/27 Python
Python+MySQL随机试卷及答案生成程序的示例代码
2021/02/01 Python
爱游人:Travelliker
2017/09/05 全球购物
北体毕业生求职信
2014/02/28 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
百货商场楼层班组长竞聘书
2014/03/31 职场文书
代办委托书怎样写
2014/04/08 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
redis实现排行榜功能
2021/05/24 Redis
vue+elementui 实现新增和修改共用一个弹框的完整代码
2021/06/08 Vue.js
浅谈redis的过期时间设置和过期删除机制
2022/03/18 MySQL