Js的MessageBox

关注

原创最新推荐文章于 2026-05-09 17:57:30 发布 1.8k 阅读 AI 写同款· GEO 优化 ›

JavaScript技巧：定制化弹窗（MessageBox）通过事件监听器，我们可以控制弹窗的显示和隐藏，并对用户的操作做出相应的响应。为了实现定制化的弹窗，我们将使用HTML、CSS和JavaScript来构建一个简单的MessageBox组件。我们将使用JavaScript来处理弹窗的显示和隐藏，以及用户对弹窗的响应。现在，我们可以使用JavaScript来处理弹窗的显示和隐藏，以及用户对弹窗的响应。首先，我们来创建HTML结构，包含一个触发弹窗的按钮和弹窗本身的容器。请注意，我们在容器中添加了一个具有唯一ID的div元素，用于显示弹窗的内容。阅读详情

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>MessageBox演示</title>

/*******************************************************************************************

* http://2lin.net

* Email:caoailin@gmail.com

* QQ:38062022

* Creation date: 2006-11-27

* 下面的内容可以拷贝到一个JS文件里面

*********************************************************************************************/

// 控制按钮常量

var MB_OK = 0;

var MB_CANCEL = 1;

var MB_OKCANCEL = 2;

var MB_YES = 3;

var MB_NO = 4;

var MB_YESNO = 5;

var MB_YESNOCANCEL = 6;

// 控制按钮文本

var MB_OK_TEXT = "确定";

var MB_CANCEL_TEXT = "取消";

var MB_YES_TEXT = " 是 ";

var MB_NO_TEXT = " 否 ";

//提示图标

var MB_ICON = "http://2lin.net/image/information.gif";

//委托方法

var MB_OK_METHOD = null;

var MB_CANCEL_METHOD = null;

var MB_YES_METHOD = null;

var MB_NO_METHOD = null;

var MB_BACKCALL = null;

var MB_STR = '<style type="text/css"><!--' +

'body{margin:0px;}' +

'.msgbox_title{background-color: #B1CDF3;height:25px;position:relative;font-size:14px;line-height:25px;padding-left:10px;border-bottom:1px solid #000;}' +

'.msgbox_control{text-align:center;clear:both;height:28px;}' +

'.msgbox_button{background-color: #B1CDF3;border:1px solid #003366;font-size:12px;line-height:20px;height:21px;}' +

'.msgbox_content{padding:10px;float:left;line-height: 20px;}' +

'.msgbox_icon{width: 50px;height: 50px;float: left;text-align: center;line-height:50px;padding-top:10px;}' +

'.msgbox_mask{position:absolute;left:0px;top:0px;z-index:99999;background-color:#333333;width:100%;height:100%;}' +

'.msgbox{background-color: #EFFAFE;position: absolute;height:auto;font-size:12px;top:50%;left:50%;border:1px solid #999999;}' +

'--></style>' +

'<div id="msgBoxMask" class="msgbox_mask" style="filter: alpha(opacity=0);display:none;"></div>' +

'<div class="msgbox" style="display:none; z-index:100000;" id="msgBox">' +

'<div class="msgbox_title" id="msgBoxTitle"></div>' +

'<div class="msgbox_icon" id="msgBoxIcon"></div>' +

'<div class="msgbox_content" id="msgBoxContent"></div>' +

'<div class="msgbox_control" id="msgBoxControl"></div></div>';

var Timer = null;

document.write(MB_STR);

var icon = new Image();

icon.src = MB_ICON;

/* 提示对话框

* 参数 1 : 提示内容

* 参数 2 : 提示标题

* 参数 3 : 图标路径

* 参数 4 : 按钮类型

function MessageBox(){

var _content = arguments[0] || "这是一个对话框！";

var _title = arguments[1] || "提示";

var _icon = arguments[2] || MB_ICON;

var _button = arguments[3] || MB_OK;

MB_BACKCALL = arguments[4];

var _iconStr = '<img src="{0}">';

var _btnStr = '<input name="{0}" id="{0}" type="button" class="msgbox_button" value="{1}" onclick="MBMethod(this)" />';

switch(_button)

{

case MB_CANCEL : _btnStr = _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); break;

case MB_YES : _btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT); break;

case MB_NO : _btnStr = _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT); break;

case MB_OKCANCEL :

_btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT) + "  " +

_btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);

break;

case MB_YESNO :

_btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "  " +

_btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT);

break;

case MB_YESNOCANCEL :

_btnStr = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "  " +

_btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT) + "  " +

_btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);

break;

default : _btnStr = _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT); break;

}

//解决　FF 下会复位

ScrollTop = GetBrowserDocument().scrollTop;

ScrollLeft = GetBrowserDocument().scrollLeft;

GetBrowserDocument().style.overflow = "hidden";

GetBrowserDocument().scrollTop = ScrollTop;

GetBrowserDocument().scrollLeft = ScrollLeft;

$("msgBoxTitle").innerHTML = _title;

$("msgBoxIcon").innerHTML = _iconStr.toFormatString(_icon);

$("msgBoxContent").innerHTML = _content;

$("msgBoxControl").innerHTML = _btnStr;

OpacityValue = 0;

$("msgBox").style.display = "";

try{$("msgBoxMask").filters("alpha").opacity = 0;}catch(e){};

$("msgBoxMask").style.opacity = 0;

$("msgBoxMask").style.display = "";

$("msgBoxMask").style.height = GetBrowserDocument().scrollHeight + "px";

$("msgBoxMask").style.width = GetBrowserDocument().scrollWidth + "px";

Timer = setInterval("DoAlpha()",1);

//设置位置

$("msgBox").style.width = "100%";

$("msgBox").style.width = ($("msgBoxIcon").offsetWidth + $("msgBoxContent").offsetWidth + 2) + "px";

$("msgBox").style.marginTop = (-$("msgBox").offsetHeight/2 + GetBrowserDocument().scrollTop) + "px";

$("msgBox").style.marginLeft = (-$("msgBox").offsetWidth/2 + GetBrowserDocument().scrollLeft) + "px";

if(_button == MB_OK || _button == MB_OKCANCEL){

$("msgBoxBtnOk").focus();

}else if(_button == MB_YES || _button == MB_YESNO || _button == MB_YESNOCANCEL){

$("msgBoxBtnYes").focus();

}

var OpacityValue = 0;

var ScrollTop = 0;

var ScrollLeft = 0;

function GetBrowserDocument()

{

var _dcw = document.documentElement.clientHeight;

var _dow = document.documentElement.offsetHeight;

var _bcw = document.body.clientHeight;

var _bow = document.body.offsetHeight;

if(_dcw == 0) return document.body;

if(_dcw == _dow) return document.documentElement;

if(_bcw == _bow && _dcw != 0)

return document.documentElement;

else

return document.body;

}

function SetOpacity(obj,opacity){

if(opacity >=1 ) opacity = opacity / 100;

try{obj.style.opacity = opacity; }catch(e){}

try{

if(obj.filters){

obj.filters("alpha").opacity = opacity * 100;

}

}catch(e){}

}

function DoAlpha(){

if (OpacityValue > 20){clearInterval(Timer);return 0;}

OpacityValue += 5;

SetOpacity($("msgBoxMask"),OpacityValue);

}

function MBMethod(obj)

{

switch(obj.id)

{

case "msgBoxBtnOk" : if(MB_BACKCALL) {MB_BACKCALL(MB_OK);} else {if(MB_OK_METHOD) MB_OK_METHOD();} break;

case "msgBoxBtnCancel" : if(MB_BACKCALL) {MB_BACKCALL(MB_CANCEL);} else {if(MB_CANCEL_METHOD) MB_CANCEL_METHOD();} break;

case "msgBoxBtnYes" : if(MB_BACKCALL) {MB_BACKCALL(MB_YES);} else {if(MB_YES_METHOD) MB_YES_METHOD();} break;

case "msgBoxBtnNo" : if(MB_BACKCALL) {MB_BACKCALL(MB_NO);} else {if(MB_NO_METHOD) MB_NO_METHOD();} break;

}

MB_OK_METHOD = null;

MB_CANCEL_METHOD = null;

MB_YES_METHOD = null;

MB_NO_METHOD = null;

MB_BACKCALL = null;

MB_OK_TEXT = "确定";

MB_CANCEL_TEXT = "取消";

MB_YES_TEXT = " 是 ";

MB_NO_TEXT = " 否 ";

$("msgBox").style.display = "none";

$("msgBoxMask").style.display = "none";

GetBrowserDocument().style.overflow = "";

GetBrowserDocument().scrollTop = ScrollTop;

GetBrowserDocument().scrollLeft = ScrollLeft;

}

String.prototype.toFormatString = function(){

var _str = this;

for(var i = 0; i < arguments.length; i++){

_str = eval("_str.replace(//{"+ i +"/}/ig,'" + arguments[i] + "')");

}

return _str;

}

function $(obj){

return document.getElementById(obj);

}

///////////////////////////////////////////////////////////////////////////////////////

</script>

function test()

{

var _msg = "<font color=red><b>演示：</b></font><br/>普通对话框！";

MessageBox(_msg);

}

function test1()

{

MB_OK_METHOD = function(){alert('你按了OK');}

MB_YES_METHOD = function(){alert('你按了YES');}

MB_NO_METHOD = function(){alert('你按了NO');}

MB_CANCEL_METHOD = function(){alert('你按了CANCEL');}

var _msg = "<font color=red><b>演示：</b></font><br/>调用对话框。是、否、取消";

MessageBox(_msg,"演示",null,MB_YESNOCANCEL);

}

function test2()

{

var _msg = "<font color=red><b>演示：</b></font><br/>调用对话框。是、否、取消";

MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback);

}

function test4()

{

var _msg = "<font color=red><b>演示：</b></font><br/>调用对话框。确定、取消";

MessageBox(_msg,"演示",MB_ICON,MB_OKCANCEL,callback);

}

function callback(value)

{

switch(value)

{

case MB_OK : alert('你按了OK'); break;

case MB_YES : alert('你按了YES'); break;

case MB_NO : alert('你按了NO'); break;

case MB_CANCEL : alert('你按了CANCEL'); break;

}

function test3()

{

MB_YES_TEXT = "演示一";

MB_NO_TEXT = "演示二";

MB_CANCEL_TEXT = "演示三";

var _msg = "<font color=red><b>演示：</b></font><br/>这是自定义的对话框<br/> <font color=green>MB_YES_TEXT MB_NO_TEXT MB_CANCEL_TEXT MB_OK_TEXT</font>";

MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback);

}

</script>

</head>

<body>

<tr>

</tr>

<tr>

<td align="center"><a href="javascript:test1()">回调演示一</a>

</tr>

<tr>

<td align="center"><a href="javascript:test2()">回调演示二

</a></td>

</tr>

<tr>

<td align="center"><a href="javascript:test4()">回调演示三</a><a href="javascript:test3()"></a></td>

</tr>

<tr>

<td align="center"><a href="javascript:test3()">自定义演示

</a></td>

</tr>

</table>

</body>

</html>

标签

#function #javascript #button #null #callback

JS宏进阶：alert、InputBox和MsgBox = "string") throw new TypeError("text/color/aligin不是字符串");== "number") throw new TypeError("fontSize不是字符串");return p;上述示例函数中，text参数，表示显示的文本，color表示文本显示时的颜色，align是文本的对齐方式，fontSize是文本的大小。阅读详情

Js的MessageBox

相关推荐