HTML

    
              
      
       width*1200
      
      
       top left
      
      
       top center
      
      
       top right
      
      
       center left
      
      
       center center
      
      
       center right
      
      
       bottom left
      
      
       bottom center
      
      
       bottom right 
       返回
      

JS

/** * @description: 浮窗 * @author: jununx@gmail.com * @update: 2014/11/10 * * @param pos{string} 定位位置，可选 ['top left', 'top center', 'top right', 'center left', 'center center', 'center right', 'bottom left', 'bottom center', 'bottom right'] * @param screenWidth{number} 可选，贴近页面宽，例如：页面主体宽960，想让浮窗贴着主体对齐时设置这个宽度 * @param backTop{number|object} 如果有参数就表示这个对象或者里面的子元素有返回顶部，如果是number就表示speed，如果是object就给里面需要返回顶端功能的元素设置{'childClass': 'yourClassName', 'speed': number} */;(function($){    var methods = {        init: function(opts){            this.bindEvents(opts);        },        isIE6: function(){            return (!-[1,] && !window.XMLHttpRequest);        },        setPos: function(opts){            var win = $(window),                scrollLeft = this.isIE6() ? win.scrollLeft() : 0,                scrollTop = this.isIE6() ? win.scrollTop() : 0,                winW = win.width(),                winH = win.height(),                objW = opts.that.width(),                objH = opts.that.height(),                winHalfW = (winW - objW) / 2,                winHalfH = (winH - objH) / 2,                screenWidth = opts.screenWidth,                screenLeft = screenWidth ? (winW - screenWidth) / 2 - objW : 0,                screenRight = screenWidth ? (winW - screenWidth) / 2 + screenWidth : winW - objW,                pos = {                    'top left': {                        'top': scrollTop,                        'left': screenLeft                    },                    'top center': {                        'top': scrollTop,                        'left': winHalfW                    },                    'top right': {                        'top': scrollTop,                        'left': screenRight                    },                    'center left': {                        'top': winHalfH + scrollTop,                        'left': screenLeft                    },                    'center center': {                        'top': winHalfH + scrollTop,                        'left': winHalfW + scrollLeft                    },                    'center right': {                        'top': winHalfH + scrollTop,                        'left': screenRight                    },                    'bottom left': {                        'top': winH - objH + scrollTop,                        'left': screenLeft                    },                    'bottom center': {                        'top': winH - objH + scrollTop,                        'left': winHalfW + scrollLeft                    },                    'bottom right': {                        'top': winH - objH + scrollTop,                        'left': screenRight                    }                };            if(this.isIE6()){                opts.that.css('position', 'absolute').css(pos[opts.pos]);            }else{                opts.that.css('position', 'fixed').css(pos[opts.pos]);            }        },        bindEvents: function(opts){            var that = this;            $(window).on('load scroll resize', function(){                that.setPos(opts);            });            if (typeof opts.backTop === 'number') {                opts.that.on('click', function(){                    that.backTop(opts.backTop);                });            } else if (typeof opts.backTop === 'object') {                opts.that.find('.'+opts.backTop.childClass).on('click', function(){                    that.backTop(opts.backTop.speed);                });            }        },        backTop: function(speed){            $('html, body').animate({'scrollTop': 0}, speed);            return false;        }    };    $.fn.popup = function(opts){        opts = $.extend({            'that': this,            'pos': 'bottom right',            'screenWidth': 0,            'backTop': 0        }, opts || {});        methods.init(opts);        return this;    };})(jQuery);//use$('.t-l').popup({        'pos': 'top left',        'screenWidth': 1200    });    $('.t-c').popup({        'pos': 'top center',        'screenWidth': 1200    });    $('.t-r').popup({        'pos': 'top right',        'screenWidth': 1200    });    $('.c-l').popup({        'pos': 'center left',        'screenWidth': 1200    });    $('.c-c').popup({        'pos': 'center center',        'screenWidth': 1200    });    $('.c-r').popup({        'pos': 'center right',        'screenWidth': 1200    });    $('.b-l').popup({        'pos': 'bottom left',        'screenWidth': 1200    });    $('.b-c').popup({        'pos': 'bottom center',        'screenWidth': 1200    });    $('.b-r').popup({        'pos': 'bottom right',        'screenWidth': 1200,        'backTop': 400    });