弹出层，漂浮层，窗口永远居中

Question

应该很简单啊，如果弹出层的高度和宽度是固定的，绝对定位 width:300px;
height:300px;
position:absolute;
border:1px #000 solid;
left:50%;
top:50%;
margin-left:-150px;
margin-top:-150px;

Answer 1

“永远”包括滚动条滚动时候也居中么？
这是我写的jquery插件，兼容所有浏览器和jquery库(function($){
   /*    弹出层插件  使用:$(selector).Ypop()  
    *@parame poper 触发者接受选择器或jquery对象。空则无条件弹出
    *@param closer 关闭者,空为弹窗中的.close_btn
    *@param function fx 动态效果函数
    *@param Boolean needMask 是否有遮罩层
    *@param string  maskId 如果设置mask就要设置id和needMask
    *@param string  eventType 触发的事件
    *@param Boolean autoScroll 滚动时弹窗是否也自动滚动
    *@param Boolean autoClose 是否自动关闭 todo未实现
    *@param int divWidth 设定popdiv宽
    *@param int divHeight 设定popdiv高
    */
    $.fn.Ypop=function(opts){
        if(typeof console === "undefined") { var console = { log: function (logMsg) { } };}
        var vars= $.extend({
            "poper":null,
            "closer":null,
            "fx":null,
           // 如果设置mask就要设置id和needMask
            needMask:true,
            maskId:"overlay",
            "popInEvent":function(){},
            "popOutEvent":function(){},
            eventType:"click",
            autoScroll:true,
            autoClose:false,
            offSet:{"x":0,"y":0}        },opts);
       var popIn=function(event){
           vars.popInEvent();
           //判断是触发式弹出还是无条件弹出
           var $popdiv=event.data.$popdiv||event;
           //设置最大索引值。最大索引值在桌面模式下有用
           window.maxIndex=window.maxIndex?++window.maxIndex:1000;
           vars.needMask==true?vars.maskIndex=window.maxIndex:0;
           //console.log("当前maxindex:"+window.maxIndex+"弹出层"+$popdiv.attr("id")+"的index"+window.maxIndex+"遮罩层"+vars.maskId+"的index"+vars.maskIndex)
           //vars.divHeight==null?$popdiv.css("height",vars.divHeight):0;           $popdiv.css({
                "display":"block",
                "left":($(window).width()-$popdiv.width())/2+$(window).scrollLeft()+vars.offSet.x+"px",
                "top":($(window).height()-$popdiv.height())/2+$(window).scrollTop()+vars.offSet.y+"px",
                "z-index":++window.maxIndex
            });            //iframe为了遮罩ie6 select.第二个div是为了拖拽时候防止过快时移动到iframe上停止
          if(vars.needMask){
           //为了防止多次弹出时避免遮罩层出现bug，必须设定index，id
              $('<div id="'+vars.maskId+'" style="background-color:#000000;height:'+$(document).height()+'px;width:'+$(document).width()+'px;left:0px;right:0px;position:absolute;z-index:'+vars.maskIndex+'"></div>').prependTo($(document.body)).css({"opacity":"0.2"}).append('<iframe frameborder="0" border="0" style="width:100%;height:100%;position:absolute;left:0;top:0;filter:Alpha(opacity=0);"></iframe>').append('<div style="height:100%;width:100%;position:absolute;left:0;right:0"></div>');
          } //绑定特定函数，便于解绑.当要自适应时
            $(window).bind("scroll",{"$popdiv":$popdiv},addjust);
            $(window).bind("resize",{"$popdiv":$popdiv},addjust);
        };
        var  addjust=function (event){
            var $popdiv=event.data.$popdiv;
            //判断事件类型，如果是resize要改变遮罩层的大小
            if(event.type=="resize"){
                $("#"+vars.maskId).css({"width":$(document).width()+"px","height":$(document).height()+"px"})
            }
            //是否自动滚动
            vars.autoScroll==true?$popdiv.css({
                "left":($(window).width()-$popdiv.width())/2+$(window).scrollLeft()+vars.offSet.x+"px",
                "top":($(window).height()-$popdiv.height())/2+$(window).scrollTop()+vars.offSet.y+"px"            }):0
        };
        var popOut=function(event){
            vars.popOutEvent();
            event.data.$popdiv.css("display","none");
            vars.needMask==true? $("#"+vars.maskId).remove():0;
            $(window).unbind("scroll",addjust)
            $(window).unbind("resize",addjust)
        };
      return this.each(function(){
            var poper,closer,reason;
            //设定呼出者和关闭者
          var $popdiv=$(this);
            if(typeof vars.poper=='undefined'||vars.poper==null||vars.poper=="")
            {reason="no"}
            else
            {typeof vars.poper=="string"?poper=$(vars.poper):poper=vars.poper;}
          //判断是否无条件弹出
          if(reason=="no"){
              popIn($popdiv);
          }else
          {//弹出者某事件后执行popIn
            poper.bind(vars.eventType,{"$popdiv":$popdiv},popIn);
             }
          //alert(typeof vars.closer)
            if( typeof vars.closer=='undefined'||vars.closer==null||vars.closer=="")
            {
                closer=$(".close_btn",$popdiv)
            }
            else
            {typeof vars.closer=="string"?closer=$(vars.closer):closer=vars.closer;
               }
          closer.bind(vars.eventType,{"$popdiv":$popdiv},popOut);        })
    }
})(jQuery);

Answer 2

不要求兼容的话fixed定位就行了，要兼容可以写scroll事件设置位置，不过ie6下效果不太平滑

Answer 3

$(window).resize(function() {
set();
}); $(window).scroll(function() {
set();
});function set() {
wWidth = $(window).width();
wHeight = $(window).height();
scrollTop = $(document).scrollTop(); if (wHeight - 400 < 0) {
top = scrollTop;
} else {
top = scrollTop + (wHeight - 400) / 2;
} $box.css({
"left" : (wWidth - 500) / 2,
"top" : top
});
}方法基本是这样，其他的自己应该会搞了吧

Answer 4

给你一个弹出子页面的：左右距离 上下距离自己调节
function OpenWindow(Content, title, type, width, height) {
        var topsize = document.documentElement.scrollTop; var leftsize = 0;
        if (type.length == 0) { type = "iframe"; }
        if (width != 0) { leftsize = (window.screen.availWidth - width) / 4; } //弹出框 可左右移动 调节
        if (height != 0) {      //上下
            if (height > 600) { topsize += 10; } else if (height > 500) { topsize += 20; } else { topsize += (window.screen.availHeight - height - 130) / 4; }
        }
        ///显示子页面
        if (type == 'iframe') {
            $("#menu_window").html("<iframe id='ifrme' name='ifrme' frameborder='0' scrolling='auto' width='" + width + "' height='" + height + "'></iframe>");
            $("#ifrme").attr("src", Content);
        }
        ///用于 弹出子页面若果没有下面的，OpenWindow只能在父页面显示子页面，不会弹出来。
        $("#menu_window").window({
            title: title, iconCls: 'icon-info', width: width + 15, height: height + 40, top: topsize, left: leftsize, resizable: false, modal: true, shadow: true,
            minimizable: false, maximizable: false, closable: true, closed: false, collapsible: false
        });
    }
调用OpenWindow(Content, title, type, width, height) ：Content：路劲；title：标题；type：格式，一般为“”；width：宽；height：高