JavaScript通用Alert美化类

最新推荐文章于 2023-04-27 18:58:35 发布

WalterRutter

最新推荐文章于 2023-04-27 18:58:35 发布

阅读量1.1k

点赞数

分类专栏： Javascript 文章标签： javascript function stylesheet input button filter

Javascript 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个自定义弹窗组件的实现方法，包括弹出框、确认框和提示框等不同类型，并提供了详细的代码示例及如何在网页中引入该组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

<mce:script type="text/javascript" src="alert1/alert.js" mce_src="alert1/alert.js"></mce:script> <link href="alert1/alert.css" mce_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" /> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> /*<![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> <mce:script type="text/javascript"></mce:script> </head> <body> <br /> <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> <br /> <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"> <mce:script type="text/javascript" src="alert1/alert.js" mce_src="alert1/alert.js"></mce:script> <link href="alert1/alert.css" mce_href="alert1/alert.css" rel="stylesheet" type="text/css" />

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

sAlert('信息内容',1,'location.href="http://pet.qq.com"','信息标题')