Js的MessageBox

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


代码如下:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>MessageBox演示</title>
<script language="javascript">
/*******************************************************************************************   
 * 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>
<script language="javascript">
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>
<table width="1500" height="1000" border="1" bordercolor="#000000">
  <tr>
    <td>　</td>
    <td align="center"><a href="javascript:test()">普通演示</a></td>
    <td>　</td>
  </tr>
  <tr>
    <td> </td>
    <td align="center"><a href="javascript:test1()">回调演示一</a>
    <label></label></td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td align="center"><a href="javascript:test2()">回调演示二

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

</a></td>
    <td> </td>
  </tr>
</table>
</body>
</html>

赞 (0)

相关推荐

  • Js的MessageBox

    看到论坛上有人模仿alert 自己也写了一个 本来想模仿winapi里的MessageBox  但可惜js 不支持 阻塞模式 返回值只能用异步了. 支持 FF ie opera DOCTYPE 可以申明 也可以不申明 存在问题 在opera 里图层不能透明 对于页面内有iframe的也无法使用 在ie里无法遮住select的 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • Js的MessageBox效果代码

    返回值只能用异步了.支持FF.ie.opera.DOCTYPE 可以申明,也可以不申明. 存在问题: 在opera 里图层不能透明 对于页面内有iframe的也无法使用 在ie里无法遮住select的 MessageBox演示_我们_www.jb51.net /******************************************************************************************* * http://2lin.net * Email:c

  • vue.js开发实现全局调用的MessageBox组件实例代码

    vue.js开发实现全局调用的MessageBox组件实例代码

    前言 一开始接触到vue中的组件的时候,对于组件的理解还是不够充分的,最近在开发个人博客项目中,一开始就没准备使用一些现在比较流行的UI库(毕竟是个人项目,多练练手还是好的),所以需要自己开发几个全局组件,这里以MessageBox为例记录下vue.js如何开发全局组件.所谓全局变量是针对vue实例下说的,即所有的vue实际都可以运用到这个组件,局部组件就是针对某个实例来说的,只有这个vue实例下才能发挥作用,下面话不多说了,来一看看详细的介绍吧. 源码 github地址:Talk is che

  • 用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)

    Node.JS是一个控制台程序,如果想要从Node.JS弹出Windows系统提示框的话,有很多方法可以实现.比如借助 electron 或 node-webkit: 在Electron中弹出消息框 Electron与Windows的接口非常完善,可以调用各种Window原生机制,如创建系统托盘图标.打开文件夹选择框等.这里使用dialog,即可弹出系统消息提示框: const { app , BrowserWindow , Menu , Tray , shell , dialog , ipcM

  • Mint UI 基于 Vue.js 移动端组件库

    Mint UI 基于 Vue.js 移动端组件库

    官网地址 http://mint-ui.github.io/ Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的重绘和重排,从而使用户获得流畅顺滑的体验. 依托 Vue.js 高效的组件化方案,Mint UI 做到了轻量化.即使全部引

  • 利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）

    前言 这篇文章实现的博客系统使用 Vue 做前端框架,Node + express 做后端,数据库使用的是 MongoDB.实现了用户注册.用户登录.博客管理(文章的修改和删除).文章编辑(Markdown).标签分类等功能. 前端模仿的是 hexo 的经典主题 NexT,本来是想把源码直接拿过来用的,后来发现还不如自己写来得快,就全部自己动手实现成 vue components. 实现的功能 1.文章的编辑,修改,删除 2.支持使用 Markdown 编辑与实时预览 3.支持代码高亮 4.给文

  • Extjs学习笔记之一 初识Extjs之MessageBox

    Extjs学习笔记之一 初识Extjs之MessageBox

    在其中新建一个my目录,以后所有的样例文件都新建在这个目录中.1.Hello world! 先看一个Extjs版的Hello World网页的全部代码: 复制代码 代码如下: <html> <head> <title>Extjs MessageBox</title> <link rel="Stylesheet" type="text/css" href="../resources/css/ext-all

  • 基于VUE.JS的移动端框架Mint UI的使用

    基于VUE.JS的移动端框架Mint UI的使用

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint-ui.github.io/docs/# 由饿了么前端团队推出的 Mint UI 是一个基于 Vue.js 的移动端组件库.自 6 月初开源以来,根据社区和团队内部的反馈,修复了一些 bug 并新增了部分组件,于本周发布了 0.2.0 版本.本文介绍如何从零开始构建一个使用 Mint UI 的 Vu

  • JS实现的点击表头排序功能示例

    JS实现的点击表头排序功能示例

    本文实例讲述了JS实现的点击表头排序功能.分享给大家供大家参考,具体如下: 运行效果: 1.index.html文件: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>jb51.net点击表头排序</t

  • 实例分析js和C#中使用正则表达式匹配a标签

    废话不多说,都在代码中,直接上 JS代码: 复制代码 代码如下: <html> <head> <script language="javascript">     var a='<P><A href=\'~abc/ccg/ab.jpg\' width="3">文字</A><A width="4" style="color:#ddd; font-weight:b

随机推荐