本文介绍 JavaScript sAlert 通用美化弹窗类的调用方法与参数配置。该函数支持信息、确认及提示三种弹窗类型，允许自定义标题与回调函数。使用时需在页面 head 中引入 alert.js 与 alert.css 文件，并通过指定格式调用实现各种交互效果。
sAlert 函数语法与参数说明
sAlert 函数的基本语法为 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> </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"> <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"', '信息标题')