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

本文介绍了一种利用HTML、CSS及JavaScript实现的简易模态对话框,通过鼠标悬停事件触发显示,适用于简单的提示场景。该方法代码简洁,但扩展性有限。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

代码如下:

<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等对象,扩展性比较局限

 

转载于:https://www.cnblogs.com/blodfox777/archive/2008/05/26/1207337.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值