jquery实现居中弹层

代码

/*
弹出窗口定位到浏览器中间
1. show(options{
height:高度
width:宽度
speed:渐显时间 默认0
container:包含的html内容的jquery对象
model:是否是模态窗口，默认true，模态对话框就是在弹层下面在覆盖遮罩层，参考上篇文章Overlay实现
})

2. close(speed:淡出时间 默认0)
*/
Q.Panel  =  function() {
    var self  =   this ;

    self._resetPosition  =  function() {
        self._container.css( " top " , self._getTop());
        self._container.css( " left " , self._getLeft());
    };
    self._getTop  =  function() {
         return  Q.bom.scrollY()  +  (Q.bom.windowHeight()  -  self._options.height)  /   2 ;
    };
    self._getLeft  =  function() {
         return  (Q.dom.pageWidth()  -  self._options.width)  /   2 ;
    };
    self.show  =  function(options) {

        self._options  =  $.extend({
            width:  350 ,
            height:  200 ,
            opacity:  0.5 ,
            model:  true ,
            speed:  0
        }, options  ||  {});

        self._container  =  self._options.container;

        var css  =  {
             ' width ' : self._options.width,
             ' height ' : self._options.height,
             ' z-index ' : Q.Overlay.zindex,
             ' position ' :  ' absolute ' ,
             ' left ' : self._getLeft(),
             ' top ' : self._getTop(),
             ' display ' :  ' none '
        };

        self._container.css(css);
         if  (self._options.model) {
            self._overlay  =   new  Q.Overlay(self._options.opacity);
            self._overlay.show();
        }

        $(window).scroll(self._resetPosition);
        $(window).resize(self._resetPosition);
        $(document.body).append(self._container);
        self._container.fadeIn(self._options.speed);
        Q.Overlay.zindex ++ ; //没弹出一次就递增，防止多个弹层重叠
    };
    self.close  =  function(speed) {
        $(window).unbind( ' resize ' , self._resetPosition);
        $(window).unbind( ' scroll ' , self._resetPosition);

        self._container.fadeOut(speed  ||   0 , function() {
            self._container.remove();
             if  (self._options.model) {
                self._overlay.close();
            }
        });

    };
};

这里居中是通过js控制的,下面是几个用这个剧中Panel实现的通用对话框

代码

/* 弹出自定义隐藏框
    <div id="league" style="display:none">
    <button class="close" >close</button>
    </div>
    
   Q.showPanel("league", function(panel, container) {
                    container.find(".close").click(function() {
                        panel.close();
                    }
                );
*/
Q.showPanel  =   function (containerId, registerEventCallback) {
     var  container  =  $( " # "   +  containerId);
     var  height  =  container.height();
     var  width  =  container.width();
    container  =  container.clone( true );
     var  options  =  { height: height, width: width, container: container };
     var  panel  =   new  Q.Panel();
    registerEventCallback(panel, container);
    panel.show(options);
};
/* 弹出窗口，从url加载窗体html片段 */
Q.openWindow  =   function (url, data, registerEventCallback) {
    $.get(url, data,  function (html) {
         var  panelDiv  =  $(html);
        panelDiv.hide();
        $(document.body).append(panelDiv);

         var  options  =  { height: panelDiv.height(), width: panelDiv.width(), container: panelDiv };
         var  panel  =   new  Q.Panel();
        registerEventCallback(panel, panelDiv);
        panel.show(options);

    });
}

/* 提示框，3秒后自动淡出 */
Q.tips  =   function (msg) {
     var  html  =   ' <div class="gu_layer w330"> '   +
     ' <div class="gu_layer_main"> '   +
         ' <h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif">提示</h2> '   +
         ' <p class="gu_layer_txt"> '   +  msg  +   ' </p> '   +
         ' <div class="gu_layer_btn"></div> '   +
     ' </div></div> '
     var  container  =  $(html);
    container.hide();
    $(document.body).append(container);

     var  panel  =   new  Q.Panel();
    panel.show({ container: container, height: container.height(), width: container.width() ,speed: 500 });

    setTimeout( function () { panel.close( 500 ); },  3000 );
};
/* 提示框 */
Q.alert  =   function (msg) {
     var  html  =   ' <div class="gu_layer w330"> '   +
     ' <div class="gu_layer_main"> '   +
         ' <h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a>提示</h2> '   +
         ' <p class="gu_layer_txt"> '   +  msg  +   ' </p> '   +
         ' <div class="gu_layer_btn"><a class="btn_org" href="">确 定</a></div> '   +
     ' </div></div> '
     var  container  =  $(html);
    container.hide();
    $(document.body).append(container);

     var  panel  =   new  Q.Panel();

    container.find( " .btn_tit_close " ).click( function () {
        panel.close();
         return   false ;
    });
    container.find( " .btn_org " ).click( function () {
        panel.close();
         return   false ;
    });
    panel.show({ container: container, height: container.height(), width: container.width() });
};
/* 确认框 cancel回调为可选 */
Q.confirm  =   function (title, msg, yes, cancel) {

     var  html  =   ' <div class="gu_layer w330"> '   +
     ' <div class="gu_layer_main"> '   +
         ' <h2><img class="icon_layer_corner" alt="" src="http://res.fetionpic.com/img/blank/spacer.gif"><a class="btn_tit_close" href="">关闭</a> '   +  title  +   ' </h2> '   +
         ' <p class="gu_layer_txt"> '   +  msg  +   ' </p> '   +
         ' <div class="gu_layer_btn"><a class="btn_org" href="">确 定</a><a class="btn_gray" href="">取 消</a></div> '   +
     ' </div></div> '
     var  container  =  $(html);
    container.hide();
    $(document.body).append(container);

     var  panel  =   new  Q.Panel();

    container.find( " .btn_tit_close " ).click( function () {
        panel.close();
         return   false ;
    });
    container.find( " .btn_gray " ).click( function () {
         if  (cancel)
            cancel();
        panel.close();
         return   false ;
    });
    container.find( " .btn_org " ).click( function () {
         if  (yes)
            yes();
        panel.close();
         return   false ;
    });
    panel.show({ container: container, height: container.height(), width: container.width() });
};

 

 

转载于:https://www.cnblogs.com/xhan/archive/2010/08/24/1807550.html