javascript弹出层的例子(A Cool Pop up by JS)

代码如下:

< html >  
< head >  
</ head >  
< body >  
< href ="1.htm"  onmouseover ="sAlert('hello');"   > Hi move here </ a >  
< script  type ="text/javascript"  language ="javascript" >  
function sAlert(str)
   
var msgw,msgh,bordercolor; 
   msgw
=400;//Width
   msgh=100;//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
="Close"
   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 >  
</ body >  
</ html >  

优点:模态对话框,效果不错,最重要的是代码少
缺点:使用文本做输入参数,而没有使用DIV等对象,扩展性比较局限

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值