首页 > 网络编程 > JavaScript > javascript技巧 > Alert 美化类

JavaScript Alert通用美化类

2009-11-29 22:54:24 作者：

只有msg是必须的，后面的参数可以省略。如果中间的参数为空则在对应位置上''或者""表示（根据实际情况选择单双引号）调用此方法须在每个使用的页面的head区域加入下面代码。

function sAlert(msg,boxtype,func,msgtitle)
sAlert('信息内容',1,'','信息标题')
@msg:提示信息内容
@boxtype：1为弹出框，2为确认框，3为提示框
@func:点确认时执行的函数
@title:信息框标题文字内容
只有msg是必须的，后面的参数可以省略。如果中间的参数为空则在对应位置上''或者""表示（根据实际情况选择单双引号）
调用此方法须在每个使用的页面的head区域加入下面代码。

复制代码代码如下:

 
<script type="text/javascript" src="alert1/alert.js" src="alert1/alert.js"></script> 
<link href="alert1/alert.css" href="alert1/alert.css" rel="stylesheet" type="text/css" /> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> 
    <head> 
    <title>弹出框测试页面</title> 
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
        <meta http-equiv="Content-Language" content="gb2312" />

var title=document.createElement("h4"); 
         title.setAttribute("id","msgTitle"); 
     var closeMsg=document.createElement("b"); 
         var titleSpan=document.createElement("span"); 
             if(msgtitle) titleSpan.innerHTML=msgtitle; 
     
         closeMsg.onclick=function(){ 
         msg_close(); 
} 
         var txt=document.createElement("div"); 
         txt.setAttribute("id","msgTxt"); 
         var msgButton=document.createElement("h5"); 
         msgButton.setAttribute("id","msgButton");

document.body.appendChild(msgObj); 
         $t("msgDiv").appendChild(title); 
         $t("msgDiv").appendChild(txt); 
         $t("msgDiv").appendChild(msgButton);

$t("msgTitle").appendChild(closeMsg); 
$t("msgTitle").appendChild(titleSpan); 
         
         var Confirm=document.createElement("input"); 
Confirm.setAttribute("id","msgConfirm"); 
         Confirm.setAttribute("type","button"); 
         Confirm.setAttribute("value","确认"); 
Confirm.onclick=function(){ 
         msg_close(); 
            eval(func); 
} 
         var Cancel=document.createElement("input"); 
Cancel.setAttribute("id","msgCancel"); 
         Cancel.setAttribute("type","button"); 
         Cancel.setAttribute("value","取消"); 
Cancel.onclick=function(){ 
         msg_close(); 
             
} 
    switch(boxtype * 1){ 
        case 1: 
            txt.innerHTML = msg; 
$t("msgButton").appendChild(Confirm); 
             
        break; 
        case 2: 
         txt.innerHTML = msg; 
            $t("msgButton").appendChild(Confirm); 
            $t("msgButton").appendChild(Cancel);

break; 
        case 3: 
            txt.innerHTML = msg; 
             $t("msgButton").appendChild(Confirm); 
        break; 
        default: 
            txt.innerHTML = msg; 
             $t("msgButton").appendChild(Confirm); 
        break; 
    }

} 
    function msg_close(){ 
            $t("bgDiv").style.display="none"; 
            var msgObj=$t("msgDiv"); 
            var title=$t("msgTitle"); 
            if(msgObj) 
$t("msgDiv").removeChild(title); 
document.body.removeChild(msgObj); 
} 
    window.onload=function(){ 
     $t("runcode").onclick=function(){ 
         var code=$t("code").innerHTML; 
         eval(code); 
         } 
    }

// --></script> 
    </head>

<body> 
    
 
    <div id="msgRun"> 
     
        <div> 
        <h5 >宠物专用信息框实例：</h5> 
<input type="button" value="弹出框" onclick="sAlert('测试效果2',1);" /> 
         <input type="button" value="确认框" onclick="sAlert('确认框',2,'','宠我宝贝');" /> 
        <input type="button" value="提示框" onclick="sAlert('提示框');" /> 
        </div> 
        
 
     <h4>function sAlert(msg,boxtype,func,title)</h4> 
     <ul> 
     <li >sAlert('信息内容',1,'','信息标题')</li> 
     <li >@msg:提示信息内容</li> 
     <li >@boxtype：1为弹出框，2为确认框，3为提示框</li> 
     <li >@func:点确认时执行的函数</li> 
     <li >@title:信息框标题文字内容</li> 
     <li >只有msg是必须的，后面的参数可以省略。如果中间的参数为空则在对应位置上''或者""表示（根据实际情况选择单双引号）</li> 
<li >调用此方法须在每个使用的页面的head区域加入下面代码。</li> 
     </ul> 
     <textarea rows="5" cols="60"> 
    <script type="text/javascript" src="alert1/alert.js" src="alert1/alert.js"></script> 
<link href="alert1/alert.css" href="alert1/alert.css" rel="stylesheet" type="text/css" />

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

测试环境：可以在下面的文本框里按上面要求的格式函数进行测试：

复制代码代码如下:

sAlert('信息内容',1,'location.href="https://www.jb51.net"','信息标题')

JavaScript Alert通用美化类

您可能感兴趣的文章: