信鸽网

JavaScript Alert通用美化类

  作者：bea

function sAlert(msg,boxtype,func,msgtitle) sAlert('信息内容',1,'','信息标题') @msg:提示信息内容 @boxtype：1为弹出框，2为确认框，3为提示框 @func:点确认时执行的函数 @title:信息框标题文字内容 只有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" />


<style type="text/css"><!--
/*<!--[CDATA[*/
*{
margin:0;padding:0;
}
ul li{list-style-type:none;}
html,body{height:100%;}
#textid{padding:10px}
#bgDiv{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;
filter:alpha(opacity:75);opacity:0.6;}
#msgDiv{text-align:center;position:absolute;left:50%;top:50%;line-height:25px;z-index:101;
padding:1px 0 25px;font-size:12px;height:auto!important;height:142px;min-height:142px;
width:255px;background:url(attachments/month_0904/g200942816344.gif) left top repeat-y;}
#msgTxt{clear:both;padding:10px 10px;text-align:left;}
#msgTxt li{border-bottom:1px dotted #69a;}
#msgTitle{font-size:12px;margin:0;height:21px;width:100%;line-height:20px;text-indent:3em;
background:url(attachments/month_0904/n200942816339.gif) left top no-repeat;text-align:left;
filter:alpha(opacity:75);opacity:0.6;font-family:Verdana,Arial;}
#msgTitle b{cursor:pointer;float:right;width:30px;height:20px;margin-right:10px;display:inline;}
#msgButton input{border:1px solid #369;color:#000;background:#eef5ff;cursor:pointer;
font-size:12px;height:20px;padding:0 5px;line-height:20px;margin:0 5px;}
#msgButton{position:absolute;bottom:0px;left:0;width:255px;text-align:center;height:20px;padding:8px 0 6px;
background:url(attachments/month_0904/l200942816354.gif) left top repeat-y;}
#msgRun{width:600px;margin:0 auto;padding:10px;background:#fff5ee;border:1px solid #f80;}
#msgRun ul{margin:10px;padding:10px;background:#fff;border:1px solid #f85;font-size:12px;}
#msgRun ul li{border-bottom:1px dotted #ccc;line-height:25px;}
input {cursor:pointer;}
p{padding:5px;}
textarea{width:580px;overflow:hidden;height:60px;padding:5px;}
/*]]>*/

--></style>
<script type="text/javascript"><!--
function $t(s){
return document.all?document.all[s]:document.getElementById(s);
}
//弹出框函数
function sAlert(msg,boxtype,func,msgtitle){

if($t('msgDiv')) return;
if($t('bgDiv')){$t('bgDiv').style.display="block";
}else{
var bgObj=document.createElement("div");
bgObj.setAttribute('id','bgDiv');
document.body.appendChild(bgObj);

if (!window.XMLHttpRequest){
var frm=document.createElement("iframe");
frm.setAttribute("name","completionFrame");
frm.setAttribute("id","completionFrame");
bgObj.appendChild(frm);}
}

var msgObj=document.createElement("div")
msgObj.setAttribute("id","msgDiv");
msgObj.style.marginLeft = "-127px";
msgObj.style.marginTop = -145+document.documentElement.scrollTop+"px";;

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="http://"','信息标题')




有用  |  无用

猜你喜欢

您可能感兴趣的文章: