日期:2014-05-16  浏览次数:20365 次

急求 一例DIV弹出层居中的实例
大家帮我提供一个 
div层 弹出后在 屏幕的正中间
 不随滚动条的滚动而 滚动
 要 IE FF 兼容的实例  
  佛祖啊 帮帮忙
希望大家不要复制网上的垃圾过来 最好给一个能用的~!@!!!!急急急急急急急急急

------解决方案--------------------
HTML code

<!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 = {
                b