zoukankan      html  css  js  c++  java

  • JS弹出模式提示窗体,实现页面其他地方不可编辑效果

    <!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">
    /*******************************************************************************************   
    * 下面的内容可以拷贝到一个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{ 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;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) + "&nbsp;&nbsp;" +
                    _btnStr.toFormatString(    "msgBoxBtnCancel", MB_CANCEL_TEXT); 
             break;
         
           case MB_YESNO       :
             _btnStr     = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "&nbsp;&nbsp;" +
                    _btnStr.toFormatString(    "msgBoxBtnNo", MB_NO_TEXT); 
              break;
       
           case MB_YESNOCANCEL :
             _btnStr     = _btnStr.toFormatString("msgBoxBtnYes", MB_YES_TEXT) + "&nbsp;&nbsp;" +
                    _btnStr.toFormatString(    "msgBoxBtnNo", MB_NO_TEXT) + "&nbsp;&nbsp;" +
           _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>

    <a href="javascript:test()">普通演示</a>

    <a href="javascript:test1()">回调演示一</a>
            <a href="javascript:test2()">回调演示二
          
            </a><a href="javascript:test4()">回调演示三</a><a href="javascript:test3()"></a><a href="javascript:test3()">自定义演示
          
            </a>
    </body>
    </html> 

    第二种：

    Code
  • 相关阅读:
    常用的16个Java实用工具类，Java开发人员请收藏！
    JVM内存区域与垃圾回收
    听说你还不知道Java代码是怎么运行的？
    Java 到底是值传递还是引用传递？
    Java线程池实现原理及其在美团业务中的实践
    别再说Java对象都是在堆内存上分配空间的了！
    面试常问的Java虚拟机内存模型，看这篇就够了！
    好用的Java工具类库，GitHub星标10k+你在用吗？
    MySQL 全文索引实现一个简单版搜索引擎
    laravel 数据库里的图片重命名
  • 原文地址：https://www.cnblogs.com/di305449473/p/1232905.html
Copyright © 2011-2022 走看看