等待页面效果 JAVASCRIPT

使用JS和静态html 配合是否能实现，页面等待效果。具体效果如下：1. 当用户点击 页面的 一个 input 时，当前页面 立刻变暗一点，并且页面上其他元素不能再进行点击。2. 当用户再次点击 页面的刚刚的input时，进行还原。

解决方案 »

  1.   

    可以用层来实现吧  如果input定位不是太复杂的话 ，首先获得该空间的宽度，那么，层的位置就可以确定了 ，显示就可以了
      

  2.   

    可以在input的onFocus事件里写方法啊点击的时候让页面的所有控件都disabled掉然后将页面的背景颜色改掉（灰一点）再次点击的时候将页面还原不知道这样行不行  呵呵
      

  3.   


    <!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>
      <title> LightBox </title>
      <style type="text/css">
      #box {
        text-align:right;
        background-color: #fff;
        border: 20px solid #000000;
      }
      </style>
     </head>
     <body>
     <script type="text/javascript">
     <!--
        var $ = function(id){
            return 'string' == typeof id ? document.getElementById(id) : id;
        }    var $d = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;    var isIE = navigator.userAgent.indexOf('MSIE') != -1;
        var isIE6 = navigator.userAgent.indexOf('MSIE 6.0') != -1;
        isIE6 && document.execCommand('BackgroundImageCache', false, true);    var Extend = function(destination, source){
            for(var pro in source){
                destination[pro] = source[pro];
            }
            return destination;
        }    function addEvent(oTarget, sType, fnHandler){
            if(window.attachEvent){
                oTarget.attachEvent("on"+sType, fnHandler);
            }else if(window.addEventListener){
                oTarget.addEventListener(sType, fnHandler, false);
            }else{
                oTarget["on"+sType] = fnHandler;
            }
        }    function removeEvent(oTarget, sType, fnHandler){
            if(window.detachEvent){
                oTarget.detachEvent("on"+sType, fnHandler);
            }else if(window.removeEventListener){
                oTarget.removeEventListener(sType, fnHandler, false);
            }else{
                oTarget["on"+sType] = null;
            }
        }    function setOpacity(obj, o){
            if(!obj.currentStyle || !obj.currentStyle.hasLayout) obj.style.zoom = 1;
            if(!!isIE)obj.style.filter = 'alpha(opacity=' + Math.round(o) + ')';
            else obj.style.opacity = o / 100;
        }    var Bind = function(object, fun){
            return function(){
                fun.apply(object, arguments);
            }
        }    var Class = {
            create: function(){
                return function(){
                    this.initialize.apply(this, arguments);
                }
            }
        }    var OverLay = Class.create();
        OverLay.prototype = {
            initialize: function(options){
                this.SetOptions(options);
                Extend(this, this.options);
                this.Lay = document.body.insertBefore(document.createElement('div'), document.body.childNodes[0]);
                with(this.Lay.style){
                    position = 'fixed';left = top = '0px';width = height = '100%';zIndex = parseInt(this.zIndex);
                    backgroundColor = this.bgColor;display = 'none';
                }
                if(isIE6){
                    this.Lay.style.position = 'absolute';
                    this._resize = Bind(this, function(){
                        this.Lay.style.width = Math.max($d.clientWidth, $d.scrollWidth) + "px";
                        this.Lay.style.height = Math.max($d.clientHeight, $d.scrollHeight) + "px";
                    });
                    this.Lay.innerHTML += "<iframe style='position:absolute;left:0px;top:0px;widht:100%;height:100%;filter:alpha(opacity=0);z-index:-1'></iframe>";
                }
            },        Show: function(){
                if(isIE6){this._resize();addEvent(window,'resize',Bind(this, this._resize))};
                setOpacity(this.Lay, this.opacity);
                this.Lay.style.display = "block";                    
            },        SetOptions: function(options){
                this.options = {
                    bgColor: "#000000",
                    opacity: 80,
                    zIndex: 1000
                };
                Extend(this.options, options || {});
            },        Close: function(){            
                this.Lay.style.display = "none";
                isIE6 && removeEvent(window,'resize',Bind(this,this._resize));
            }
        }    var LightBox = Class.create();
        LightBox.prototype = {
            initialize: function(boxId, options){
                this.Box = $(boxId);
                this.Lay = new OverLay();
                this.SetOptions(options);
                Extend(this, this.options);            this.Box.style.display = "none";
                this.Box.style.zIndex = parseInt(this.Lay.zIndex) + 1;
                if(isIE6){
                    this._top = this._left = 0; 
                    this._fixed = Bind(this, function(){ this.isCenter ? this.SetCenter() : this.FixScroll(); });
                }
            },        SetCenter: function(){
                this.Box.style.marginLeft = $d.scrollLeft - this.Box.offsetWidth / 2 + "px";
                this.Box.style.marginTop = $d.scrollTop  - this.Box.offsetHeight / 2 + "px";
            },        FixScroll: function(){
                this.Box.style.top = $d.scrollTop - this._top + this.Box.offsetTop + "px";
                this.Box.style.left = $d.scrollLeft - this._left + this.Box.offsetLeft + "px";
                this._top = $d.scrollTop; this._left = $d.scrollLeft;
            },        Show: function(){
                this.hasLayer && this.Lay.Show();
                this.Box.style.position = this.isScroll && !isIE6 ? 'fixed' : 'absolute';    
                this.Box.style.display = "block";
                if(this.isCenter){
                    this.Box.style.left = "50%"; this.Box.style.top = "50%";
                    if(this.isScroll){
                        this.Box.style.marginLeft = -this.Box.offsetWidth / 2 + "px";
                        this.Box.style.marginTop =  - this.Box.offsetHeight / 2 + "px";
                    }else {
                        this.SetCenter();
                    }
                }else{
                    this.Box.style.left = "20%"; this.Box.style.top = "10%";
                }
                if(isIE6){
                    this.isCenter ? this.SetCenter() : this.isScroll && this.FixScroll();
                    this.isScroll && addEvent(window,'scroll',this._fixed);        
                }        },        SetOptions: function(options){
                this.options = {
                    hasLayer: true,
                    isCenter: true,
                    isScroll: true
                };
                Extend(this.options, options || {});
            },        Close: function(){
                this.Box.style.display = "none";
                this.Lay.Close();
            }
        }
     //-->
     </script>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <input type="button" id="openbtn" value="打开层" />
      <div id="box" style="width:300px;height:300px;">
        </br>
        <span id="clobtn">
           <input type="button" value="关闭"/>
        </span>
      </div>
     <select style="width:100px;">
        <option value="" selected="selected">Test IE6</option>
     </select>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <script type="text/javascript">
      <!--
        var box = new LightBox('box');
        $('openbtn').onclick = function(){
            box.Show();
        }
        $('clobtn').onclick = function(){
            box.Close();
        }  //-->
      </script>
     </body>
    </html>