发布于 2016-12-29 18:57:36 | 24 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


js实现一个弹出层并锁屏效果是每一网友所期望的效果,于是搜集整理一番,把代码晒出来和大家分享
 
<!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> 


相关阅读 :
js写一个弹出层并锁屏效果实现代码
JS实现的添加弹出层并完成锁屏操作示例
js 弹出层 并可以拖拽
js控制div弹出层实现方法
JS弹出层的显示与隐藏示例代码
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
DIV+CSS+JS 变灰弹出层
js弹出div并显示遮罩层
js多级树形弹出一个小窗口层(非常好用)实例代码
JS弹出层遮罩,隐藏背景页面滚动条细节优化分析
JS中frameset框架弹出层实例代码
JS实现响应鼠标点击动画渐变弹出层效果代码
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务