/* *Jquery 简单弹出层插件 *需要jquery1.3.2或者以上版本支持 *By 甘强 2011.01 *1.3版 * 添加一个延时自动关闭弹出层的功能 * 添加了弹出层的显示位置的个性选择 *插件官方地址:http://www.skygq.com/2010/01/05/jquery-simple-popup-overlay-1-3/ */ ;(function($){ //给页面装载CSS样式 var css = ''; $("head").append(css); var ie6 = ($.browser.msie && $.browser.version < 7); var timeout; $.fn.skygqbox = function(options){ if (!this.length) { return this;} var s = $.extend({}, $.fn.skygqbox.Default, options || {}); return this.each(function(){ $.skygqbox($(this),s) }); }; $.skygqbox = function(elements,s){ if ($(elements).length == 0){ //elements = $("").append(elements); } var s = $.extend({}, $.fn.skygqbox.Default, s || {}); if ($("#skygqOverlay").length > 0){ return; } //弹框的显示初始化 var WRAP = '
'; $("body").append(WRAP); if (typeof (timeout) != "undefined"){ clearTimeout(timeout); } //一些元素对象 $.o = { s: s, ele: elements, bg: $("#skygqOverlay"), out: $("#wrapOut"), bar: $("#wrapBar"), clo: $("#wrapClose"), bd: $("#wrapBody") }; elements.show(); $.o.bd.append(elements); //尺寸 $.skygqbox.setSize(); //定位 $.skygqbox.setPosition(); $.o.clo.click(function(){ $.skygqbox.hide(); }); if(s.autoClose > 0){ timeout = setTimeout($.skygqbox.hide, s.autoClose); } }; $.skygqbox.getSize = function(o){ //获取任意元素的高宽 var w_h = {}; $('
').appendTo("body").append(o.clone()); w_h.w = $("#wrapClone").width(); w_h.h = $("#wrapClone").height(); $("#wrapClone").remove(); return w_h; }; $.skygqbox.setSize = function(){ if(!$.o.bd.size() || !$.o.ele.size() || !$.o.bd.size()){ return; } //主体内容的尺寸 var bd_w = parseInt($.o.s.width, 10), bd_h = parseInt($.o.s.height, 10); if(!bd_w || bd_w <= 0 ){ var x_size = $.skygqbox.getSize($.o.ele), w = $(window).width(); //宽度自动 bd_w = x_size.w; if(bd_w < 50){ bd_w = 120; }else if(bd_w > w){ bd_w = w - 120; } } $.o.bd.css("width", bd_w); $.o.out.css("width", bd_w+2); if(bd_h > 0){ $.o.bd.css("height", bd_h); } return $.o.bd; }; $.skygqbox.setPosition = function(){ if(!$.o.bg.size() || !$.o.ele.size() || !$.o.out.size()){ return; } var w = $(window).width(), h = $(window).height(), ph = $("body").height(); if(ph < h){ ph = h; } $.o.bg.css("opacity", $.o.s.opacity); if (ie6){ $.o.bg.css({ position:"absolute", width:w, height:ph }); $.o.out.css("position","absolute"); } //主体内容的位置 //获取当前主体元素的尺寸 var xh = $.o.out.outerHeight(), xw = $.o.out.outerWidth(); //弹出层定位: switch($.o.s.position){ case "middle": $.o.out.css({ "top":"50%", "left":"50%", "marginLeft": '-' + parseInt((xw / 2),10) + 'px', "width": xw + 'px',zIndex:$.o.s.index }); if ( !($.browser.msie && $.browser.version < 7)) { // 兼容IE6 $.o.out.css({marginTop: '-' + parseInt((xh / 2),10) + 'px'}); } break; case "left_top": $.o.out.css({ "top":0, "left":0, "width": xw + 'px',zIndex:$.o.s.index }); break; case "left_middle": $.o.out.css({ "top":"50%", "left":0, "width": xw + 'px',zIndex:$.o.s.index }); if ( !($.browser.msie && $.browser.version < 7)) { // 兼容IE6 $.o.out.css({marginTop: '-' + parseInt((xh / 2),10) + 'px'}); } break; case "left_bottom": $.o.out.css({ "bottom":0, "left":0, "width": xw + 'px',zIndex:$.o.s.index }); break; case "top_middle": $.o.out.css({ "top":"0", "left":"50%", "marginLeft": '-' + parseInt((xw / 2),10) + 'px', "width": xw + 'px',zIndex:$.o.s.index }); break; case "right_top": $.o.out.css({ "top":0, "right":0, "width": xw + 'px',zIndex:$.o.s.index }); break; case "right_middle": $.o.out.css({ "top":"50%", "right":0, "width": xw + 'px',zIndex:$.o.s.index }); if ( !($.browser.msie && $.browser.version < 7)) { // 兼容IE6 $.o.out.css({marginTop: '-' + parseInt((xh / 2),10) + 'px'}); } break; case "right_bottom": $.o.out.css({ "bottom":0, "right":0, "width": xw + 'px',zIndex:$.o.s.index }); break; case "bottom_middle": $.o.out.css({ "bottom":"0", "left":"50%", "marginLeft": '-' + parseInt((xw / 2),10) + 'px', "width": xw + 'px',zIndex:$.o.s.index }); break; default: $.o.out.css({ "top":"50%", "left":"50%", "marginLeft": '-' + parseInt((xw / 2),10) + 'px', "width": xw + 'px',zIndex:$.o.s.index }); if ( !($.browser.msie && $.browser.version < 7)) { // 兼容IE6 $.o.out.css({marginTop: '-' + parseInt((xh / 2),10) + 'px'}); } break; } return $.o.out; }; $.skygqbox.hide = function(){ if($.o.ele && $.o.out.size() && $.o.bg.size()){ $.o.ele.clone(true).appendTo($("body")).hide(); $.o.out.fadeOut("fast", function(){ $(this).remove(); }); $.o.bg.fadeOut("fast", function(){ $(this).remove(); }); } return false; }; $.fn.skygqbox.Default = { title : "对话框", shut : "关闭", index : 2000, opacity : 0.5, width : "auto", height : "auto", autoClose : 0,//弹出层等待多长时间自动关闭(单位:毫秒) 0或者负数不触发自动关闭 position : "middle" }; })(jQuery);