一个Javascript遮罩层和窗口

JQuery也有很多这样的插件,觉得这个也不错
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http:www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>无标题页</title>
    
<script type="text/javascript">
    
function sAlert(str){ 
   
var msgw,msgh,bordercolor; 
   msgw
=550;//Width
   msgh=265;//Height 
   titleheight=25 //title Height;
   bordercolor="#336699";//boder color
   titlecolor="#99CCFF";//title color
   var sWidth,sHeight; 
   sWidth
=document.body.offsetWidth; 
   sHeight
=screen.height; 
   
var bgObj=document.createElement("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); 
   
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); 
          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>
</head>
<body>
    
<div onclick="sAlert('谁让你点我的!');">点我点我点我点我点我点我点我</div>
    
<input id="Text1" type="text" />
</body>
</html>

posted on 2009-08-21 09:16  Ferry  阅读(2866)  评论(0编辑  收藏  举报

导航