自定義alert效果

<input type="button" value="點擊這裏" onclick="sAlert('測試效果<br>還可以直接書寫HTML代碼 <br>© 2006');" />   
   
<script type="text/javascript" language="javascript">   
//Author:Daviv    
//
Blog:<a href="http://blog.163.com/jxdawei" target="_blank">http://blog.163.com/jxdawei</a>   
//
Date:2006-10-28    
//
Email:[email protected]    
            function sAlert(str){    
            
var msgw,msgh,bordercolor;    
            msgw
=400;//提示窗口的寬度    
            msgh=100;//提示窗口的高度    
            bordercolor="#336699";//提示窗口的邊框顏色    
            titlecolor="#99CCFF";//提示窗口的標題顏色    
                
            
var sWidth,sHeight;    
            sWidth
=document.body.offsetWidth;    
            sHeight
=document.body.offsetHeight;    
                
   
            
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";    
            document.body.appendChild(bgObj);    
            
var msgObj=document.createElement("div")    
            msgObj.setAttribute(
"id","msgDiv");    
            msgObj.setAttribute(
"align","center");    
            msgObj.style.position
="absolute";    
            msgObj.style.background
="white";    
            msgObj.style.font
="12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";    
            msgObj.style.border
="1px solid " + bordercolor;    
            msgObj.style.width
=msgw + "px";    
            msgObj.style.height
=msgh + "px";    
          msgObj.style.top
=(document.documentElement.scrollTop + (sHeight-msgh)/2+ "px";    
          msgObj.style.left
=(sWidth-msgw)/2 + "px";    
          
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>   
 
發佈了28 篇原創文章 · 獲贊 5 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章