Js的MessageBox_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

Js的MessageBox_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 07:23 PM

看到论坛上有人模仿alert　自己也写了一个
本来想模仿winapi里的MessageBox
但可惜js 不支持　阻塞模式　
返回值只能用异步了。
支持　FF ie opera
DOCTYPE 可以申明　也可以不申明
存在问题　
在opera 里图层不能透明　
对于页面内有iframe的也无法使用
在ie里无法遮住select的

复制代码代码如下:

nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
MessageBox演示 
<script> <BR>/*******************************************************************************************    <BR> * http://2lin.net <BR> * Email:caoailin@gmail.com  <BR> * QQ:38062022  <BR> * Creation date: 2006-11-27  <BR> * 下面的内容可以拷贝到一个JS文件里面 <BR>*********************************************************************************************/ <br><br><BR>// 控制按钮常量 <BR>var MB_OK = 0; <BR>var MB_CANCEL = 1; <BR>var MB_OKCANCEL = 2; <BR>var MB_YES = 3; <BR>var MB_NO = 4; <BR>var MB_YESNO = 5; <BR>var MB_YESNOCANCEL = 6; <br><br>// 控制按钮文本 <BR>var MB_OK_TEXT = "确定"; <BR>var MB_CANCEL_TEXT = "取消"; <BR>var MB_YES_TEXT = " 是 "; <BR>var MB_NO_TEXT = " 否 "; <br><br>//提示图标 <BR>var MB_ICON = "http://2lin.net/image/information.gif"; <br><br><BR>//委托方法 <BR>var MB_OK_METHOD = null; <BR>var MB_CANCEL_METHOD = null; <BR>var MB_YES_METHOD = null; <BR>var MB_NO_METHOD = null; <BR>var MB_BACKCALL = null; <br><br>var MB_STR = '<style type="text/css"><!--' + <BR>            'body{margin:0px;}' + <BR>            '.msgbox_title{background-color: #B1CDF3;height:25px;position:relative;font-size:14px;line-height:25px;padding-left:10px;border-bottom:1px solid #000;}' + <BR>            '.msgbox_control{text-align:center;clear:both;height:28px;}' + <BR>            '.msgbox_button{background-color: #B1CDF3;border:1px solid #003366;font-size:12px;line-height:20px;height:21px;}' + <BR>            '.msgbox_content{padding:10px;float:left;line-height: 20px;}' + <BR>            '.msgbox_icon{width: 50px;height: 50px;float: left;text-align: center;line-height:50px;padding-top:10px;}' + <BR>            '.msgbox_mask{position:absolute;left:0px;top:0px;z-index:99999;background-color:#333333;width:100%;height:100%;}' + <BR>            '.msgbox{background-color: #EFFAFE;position: absolute;height:auto;font-size:12px;top:50%;left:50%;border:1px solid #999999;}' + <BR>            '-->' + <BR>            '<div id="msgBoxMask" class="msgbox_mask" style="filter: alpha(opacity=0);display:none;"></script>

' +
'

';

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 = ' Js的MessageBox_javascript技巧

';
 var _btnStr = '';


 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 _str = eval("_str.replace(/\\{"+ i +"\\}/ig,'" + arguments[i] + "')");
 }
 return _str;
}

function $(obj){
 return document.getElementById(obj);
}
///////////////////////////////////////////////////////////////////////////////////////

<script> function test() { var _msg = "演示： 普通对话框！"; 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 = "演示： 调用对话框。是、否、取消"; MessageBox(_msg,"演示",null,MB_YESNOCANCEL); } function test2() { var _msg = "演示： 调用对话框。是、否、取消"; MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback); } function test4() { var _msg = "演示： 调用对话框。确定、取消"; 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 = "演示： 这是自定义的对话框 MB_YES_TEXT MB_NO_TEXT MB_CANCEL_TEXT MB_OK_TEXT"; MessageBox(_msg,"演示",MB_ICON,MB_YESNOCANCEL,callback); } </script>