现在的位置: 首页 > 综合 > 正文

客户端带阴影Model弹出层的实现(Model Pop up with shadow back ground by JS)

2012年02月02日 ⁄ 综合 ⁄ 共 2943字 ⁄ 字号 评论关闭
客户的问题:

I have a submit button when i click the submit button i want to generate a message box with some color(pink) message should be successfully submitted the data,and i know the script for alert box but i need color which is important

回答:

<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>

抱歉!评论已关闭.