php网页小弹窗提示,个性化网页小弹窗

看到论坛上有人模仿alert&＃xff0c;自己也写了一个。

本来想模仿winapi里的MessageBox

但可惜js 不支持&＃xff0c;阻塞模式。

返回值只能用异步了。

支持FF、ie、opera。

DOCTYPE 可以申明&＃xff0c;也可以不申明。

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

* http://2lin.net

* Email:caoailin&＃64;gmail.com

* QQ:38062022

* Creation date: 2006-11-27

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

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

// 控制按钮常量

var MB_OK &＃61; 0;

var MB_CANCEL &＃61; 1;

var MB_OKCANCEL &＃61; 2;

var MB_YES &＃61; 3;

var MB_NO &＃61; 4;

var MB_YESNO &＃61; 5;

var MB_YESNOCANCEL &＃61; 6;

// 控制按钮文本

var MB_OK_TEXT &＃61; "确定";

var MB_CANCEL_TEXT &＃61; "取消";

var MB_YES_TEXT &＃61; " 是 ";

var MB_NO_TEXT &＃61; " 否 ";

//提示图标

var MB_ICON &＃61; "http://www.cnn6.net??/files/080516/1_011452.gif";

//委托方法

var MB_OK_METHOD &＃61; null;

var MB_CANCEL_METHOD &＃61; null;

var MB_YES_METHOD &＃61; null;

var MB_NO_METHOD &＃61; null;

var MB_BACKCALL &＃61; null;

var MB_STR &＃61; &＃39;

&＃39;body{margin:0px;}&＃39; &＃43;

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

&＃39;.msgbox_control{text-align:center;clear:both;height:28px;}&＃39; &＃43;

&＃39;.msgbox_button{background-color: #B1CDF3;border:1px solid #003366;font-size:12px;line-height:20px;height:21px;}&＃39; &＃43;

&＃39;.msgbox_content{padding:10px;float:left;line-height: 20px;}&＃39; &＃43;

&＃39;.msgbox_icon{width: 50px;height: 50px;float: left;text-align: center;line-height:50px;padding-top:10px;}&＃39; &＃43;

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

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

&＃39;-->&＃39; &＃43;

&＃39;

&＃39;

var Timer &＃61; null;

document.write(MB_STR);

var icon &＃61; new Image();

icon.src &＃61; MB_ICON;

/* 提示对话框

* 参数 1 : 提示内容

* 参数 2 : 提示标题

* 参数 3 : 图标路径

* 参数 4 : 按钮类型

*/

function MessageBox(){

var _content &＃61; arguments[0] || "这是一个对话框&＃xff01;";

var _title &＃61; arguments[1] || "提示";

var _icon &＃61; arguments[2] || MB_ICON;

var _button &＃61; arguments[3] || MB_OK;

MB_BACKCALL &＃61; arguments[4];

var _iconStr &＃61; &＃39;&＃39;;

var _btnStr &＃61; &＃39;&＃39;;

switch(_button)

{

case MB_CANCEL : _btnStr &＃61; _btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT); break;

case MB_YES : _btnStr &＃61; _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT); break;

case MB_NO : _btnStr &＃61; _btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT); break;

case MB_OKCANCEL :

_btnStr &＃61; _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT) &＃43; "  " &＃43;

_btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);

break;

case MB_YESNO :

_btnStr &＃61; _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) &＃43; "  " &＃43;

_btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT);

break;

case MB_YESNOCANCEL :

_btnStr &＃61; _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) &＃43; "  " &＃43;

_btnStr.toFormatString("msgBoxBtnNo", MB_NO_TEXT) &＃43; "  " &＃43;

_btnStr.toFormatString("msgBoxBtnCancel", MB_CANCEL_TEXT);

break;

default : _btnStr &＃61; _btnStr.toFormatString("msgBoxBtnOk", MB_OK_TEXT); break;

}

//解决　FF 下会复位

ScrollTop &＃61; GetBrowserDocument().scrollTop;

ScrollLeft &＃61; GetBrowserDocument().scrollLeft;

GetBrowserDocument().style.overflow &＃61; "hidden";

GetBrowserDocument().scrollTop &＃61; ScrollTop;

GetBrowserDocument().scrollLeft &＃61; ScrollLeft;

$("msgBoxTitle").innerHTML &＃61; _title;

$("msgBoxIcon").innerHTML &＃61; _iconStr.toFormatString(_icon);

$("msgBoxContent").innerHTML &＃61; _content;

$("msgBoxControl").innerHTML &＃61; _btnStr;

OpacityValue &＃61; 0;

$("msgBox").style.display &＃61; "";

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

$("msgBoxMask").style.opacity &＃61; 0;

$("msgBoxMask").style.display &＃61; "";

$("msgBoxMask").style.height &＃61; GetBrowserDocument().scrollHeight &＃43; "px";

$("msgBoxMask").style.width &＃61; GetBrowserDocument().scrollWidth &＃43; "px";

Timer &＃61; setInterval("DoAlpha()",1);

//设置位置

$("msgBox").style.width &＃61; "100%";

$("msgBox").style.width &＃61; ($("msgBoxIcon").offsetWidth &＃43; $("msgBoxContent").offsetWidth &＃43; 2) &＃43; "px";

$("msgBox").style.marginTop &＃61; (-$("msgBox").offsetHeight/2 &＃43; GetBrowserDocument().scrollTop) &＃43; "px";

$("msgBox").style.marginLeft &＃61; (-$("msgBox").offsetWidth/2 &＃43; GetBrowserDocument().scrollLeft) &＃43; "px";

if(_button &＃61;&＃61; MB_OK || _button &＃61;&＃61; MB_OKCANCEL){

$("msgBoxBtnOk").focus();

}else if(_button &＃61;&＃61; MB_YES || _button &＃61;&＃61; MB_YESNO || _button &＃61;&＃61; MB_YESNOCANCEL){

$("msgBoxBtnYes").focus();

}

}

var OpacityValue &＃61; 0;

var ScrollTop &＃61; 0;

var ScrollLeft &＃61; 0;

function GetBrowserDocument()

{

var _dcw &＃61; document.documentElement.clientHeight;

var _dow &＃61; document.documentElement.offsetHeight;

var _bcw &＃61; document.body.clientHeight;

var _bow &＃61; document.body.offsetHeight;

if(_dcw &＃61;&＃61; 0) return document.body;

if(_dcw &＃61;&＃61; _dow) return document.documentElement;

if(_bcw &＃61;&＃61; _bow && _dcw !&＃61; 0)

return document.documentElement;

else

return document.body;

}

function SetOpacity(obj,opacity){

if(opacity >&＃61;1 ) opacity &＃61; opacity / 100;

try{obj.style.opacity &＃61; opacity; }catch(e){}

try{

if(obj.filters){

obj.filters("alpha").opacity &＃61; opacity * 100;

}

}catch(e){}

}

function DoAlpha(){

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

OpacityValue &＃43;&＃61; 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 &＃61; null;

MB_CANCEL_METHOD &＃61; null;

MB_YES_METHOD &＃61; null;

MB_NO_METHOD &＃61; null;

MB_BACKCALL &＃61; null;

MB_OK_TEXT &＃61; "确定";

MB_CANCEL_TEXT &＃61; "取消";

MB_YES_TEXT &＃61; " 是 ";

MB_NO_TEXT &＃61; " 否 ";

$("msgBox").style.display &＃61; "none";

$("msgBoxMask").style.display &＃61; "none";

GetBrowserDocument().style.overflow &＃61; "";

GetBrowserDocument().scrollTop &＃61; ScrollTop;

GetBrowserDocument().scrollLeft &＃61; ScrollLeft;

}

String.prototype.toFormatString &＃61; function(){

var _str &＃61; this;

for(var i &＃61; 0; i

_str &＃61; eval("_str.replace(/\\{"&＃43; i &＃43;"\\}/ig,&＃39;" &＃43; arguments[i] &＃43; "&＃39;)");

}

return _str;

}

function $(obj){

return document.getElementById(obj);

}

///

function test()

{

var _msg &＃61; "演示&＃xff1a;
普通对话框&＃xff01;";

MessageBox(_msg);

}

function test1()

{

MB_OK_METHOD &＃61; function(){alert(&＃39;你按了OK&＃39;);}

MB_YES_METHOD &＃61; function(){alert(&＃39;你按了YES&＃39;);}

MB_NO_METHOD &＃61; function(){alert(&＃39;你按了NO&＃39;);}

MB_CANCEL_METHOD &＃61; function(){alert(&＃39;你按了CANCEL&＃39;);}

var _msg &＃61; "演示&＃xff1a;
调用对话框。是、否、取消";

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

}

function test2()

{

var _msg &＃61; "演示&＃xff1a;
调用对话框。是、否、取消";

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

}

function test4()

{

var _msg &＃61; "演示&＃xff1a;
调用对话框。确定、取消";

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

}

function callback(value)

{

switch(value)

{

case MB_OK : alert(&＃39;你按了OK&＃39;); break;

case MB_YES : alert(&＃39;你按了YES&＃39;); break;

case MB_NO : alert(&＃39;你按了NO&＃39;); break;

case MB_CANCEL : alert(&＃39;你按了CANCEL&＃39;); break;

}

}

function test3()

{

MB_YES_TEXT &＃61; "演示一";

MB_NO_TEXT &＃61; "演示二";

MB_CANCEL_TEXT &＃61; "演示三";

var _msg &＃61; "演示&＃xff1a;
这是自定义的对话框MB_YES_TEXT MB_NO_TEXT MB_CANCEL_TEXT MB_OK_TEXT";

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

}