jquery.skygqbox.1.3.js 7.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  1. /*
  2. *Jquery 简单弹出层插件
  3. *需要jquery1.3.2或者以上版本支持
  4. *By 甘强 2011.01
  5. *1.3版
  6. * 添加一个延时自动关闭弹出层的功能
  7. * 添加了弹出层的显示位置的个性选择
  8. *插件官方地址:http://www.skygq.com/2010/01/05/jquery-simple-popup-overlay-1-3/
  9. */
  10. ;(function($){
  11. //给页面装载CSS样式
  12. var css = '<style type="text/css">#skygqOverlay{position:fixed;z-index:2000;left:0;top:0;width:100%;height:100%;background:black;}.wrap_out{border:5px solid #000 opacity: 0.2;background:#eee;box-shadow:0 0 6px rgba(0,0,0,.5);-moz-box-shadow:0 0 6px rgba(0,0,0,0.5);-webkit-box-shadow:0 0 6px rgba(0,0,0,.5);position:fixed;z-index:2001;}.wrap_in{background:#fafafa;border:1px solid #ccc;}.wrap_bar{width:100%;background:#f7f7f7;border-top:3px solid #f9f9f9;border-bottom:4px solid #eee;margin-top:2px;}.wrap_title{line-height:5px;background:#f3f3f3;border-top:4px solid #f5f5f5;border-bottom:5px solid #f1f1f1;margin-top:3px;}.wrap_title span{position:relative;margin-left:10px;cursor:text;}.wrap_body{display:inline-block;border-top:1px solid #ddd;background:white;}.wrap_close{margin-top:-18px;color:#34538b;font-weight:bold;margin-right:10px;font-family:Tahoma;text-decoration:none;cursor:pointer;float:right;}.wrap_close:hover{text-decoration:none;color:#f30;}.submit_btn{display:inline-block;padding:3px 12px 1.99px;background:#486aaa;border:1px solid;border-color:#a0b3d6 #34538b #34538b #a0b3d6;color:#f3f3f3;line-height:16px;cursor:pointer;overflow:visible;}.submit_btn:hover{text-decoration:none;color:#ffffff;}.cancel_btn{display:inline-block;padding:3px 12px 1.99px;background:#eee;border:1px solid;border-color:#f0f0f0 #bbb #bbb #f0f0f0;color:#333;line-height:16px;cursor:pointer;overflow:visible;}</style>';
  13. $("head").append(css);
  14. var ie6 = ($.browser.msie && $.browser.version < 7);
  15. var timeout;
  16. $.fn.skygqbox = function(options){
  17. if (!this.length) { return this;}
  18. var s = $.extend({}, $.fn.skygqbox.Default, options || {});
  19. return this.each(function(){
  20. $.skygqbox($(this),s)
  21. });
  22. };
  23. $.skygqbox = function(elements,s){
  24. if ($(elements).length == 0){
  25. //elements = $("<span></span>").append(elements);
  26. }
  27. var s = $.extend({}, $.fn.skygqbox.Default, s || {});
  28. if ($("#skygqOverlay").length > 0){
  29. return;
  30. }
  31. //弹框的显示初始化
  32. var WRAP = '<div id="skygqOverlay"></div><div class="wrap_out" id="wrapOut"><div class="wrap_in" id="wrapIn"></div>';
  33. $("body").append(WRAP);
  34. if (typeof (timeout) != "undefined"){
  35. clearTimeout(timeout);
  36. }
  37. //一些元素对象
  38. $.o = {
  39. s: s,
  40. ele: elements,
  41. bg: $("#skygqOverlay"),
  42. out: $("#wrapOut"),
  43. bar: $("#wrapBar"),
  44. clo: $("#wrapClose"),
  45. bd: $("#wrapBody")
  46. };
  47. elements.show();
  48. $.o.bd.append(elements);
  49. //尺寸
  50. $.skygqbox.setSize();
  51. //定位
  52. $.skygqbox.setPosition();
  53. $.o.clo.click(function(){
  54. $.skygqbox.hide();
  55. });
  56. if(s.autoClose > 0){
  57. timeout = setTimeout($.skygqbox.hide, s.autoClose);
  58. }
  59. };
  60. $.skygqbox.getSize = function(o){
  61. //获取任意元素的高宽
  62. var w_h = {};
  63. $('<div id="wrapClone" style="position:absolute;left:-6000px;"></div>').appendTo("body").append(o.clone());
  64. w_h.w = $("#wrapClone").width();
  65. w_h.h = $("#wrapClone").height();
  66. $("#wrapClone").remove();
  67. return w_h;
  68. };
  69. $.skygqbox.setSize = function(){
  70. if(!$.o.bd.size() || !$.o.ele.size() || !$.o.bd.size()){
  71. return;
  72. }
  73. //主体内容的尺寸
  74. var bd_w = parseInt($.o.s.width, 10), bd_h = parseInt($.o.s.height, 10);
  75. if(!bd_w || bd_w <= 0 ){
  76. var x_size = $.skygqbox.getSize($.o.ele), w = $(window).width();
  77. //宽度自动
  78. bd_w = x_size.w;
  79. if(bd_w < 50){
  80. bd_w = 120;
  81. }else if(bd_w > w){
  82. bd_w = w - 120;
  83. }
  84. }
  85. $.o.bd.css("width", bd_w);
  86. $.o.out.css("width", bd_w+2);
  87. if(bd_h > 0){
  88. $.o.bd.css("height", bd_h);
  89. }
  90. return $.o.bd;
  91. };
  92. $.skygqbox.setPosition = function(){
  93. if(!$.o.bg.size() || !$.o.ele.size() || !$.o.out.size()){
  94. return;
  95. }
  96. var w = $(window).width(),
  97. h = $(window).height(),
  98. ph = $("body").height();
  99. if(ph < h){
  100. ph = h;
  101. }
  102. $.o.bg.css("opacity", $.o.s.opacity);
  103. if (ie6){
  104. $.o.bg.css({
  105. position:"absolute",
  106. width:w,
  107. height:ph
  108. });
  109. $.o.out.css("position","absolute");
  110. }
  111. //主体内容的位置
  112. //获取当前主体元素的尺寸
  113. var xh = $.o.out.outerHeight(), xw = $.o.out.outerWidth();
  114. //弹出层定位:
  115. switch($.o.s.position){
  116. case "middle":
  117. $.o.out.css({
  118. "top":"50%",
  119. "left":"50%",
  120. "marginLeft": '-' + parseInt((xw / 2),10) + 'px',
  121. "width": xw + 'px',zIndex:$.o.s.index
  122. });
  123. if ( !($.browser.msie && $.browser.version < 7)) { // 兼容IE6
  124. $.o.out.css({marginTop: '-' + parseInt((xh / 2),10) + 'px'});
  125. }
  126. break;
  127. case "left_top":
  128. $.o.out.css({
  129. "top":0,
  130. "left":0,
  131. "width": xw + 'px',zIndex:$.o.s.index
  132. });
  133. break;
  134. case "left_middle":
  135. $.o.out.css({
  136. "top":"50%",
  137. "left":0,
  138. "width": xw + 'px',zIndex:$.o.s.index
  139. });
  140. if ( !($.browser.msie && $.browser.version < 7)) { // 兼容IE6
  141. $.o.out.css({marginTop: '-' + parseInt((xh / 2),10) + 'px'});
  142. }
  143. break;
  144. case "left_bottom":
  145. $.o.out.css({
  146. "bottom":0,
  147. "left":0,
  148. "width": xw + 'px',zIndex:$.o.s.index
  149. });
  150. break;
  151. case "top_middle":
  152. $.o.out.css({
  153. "top":"0",
  154. "left":"50%",
  155. "marginLeft": '-' + parseInt((xw / 2),10) + 'px',
  156. "width": xw + 'px',zIndex:$.o.s.index
  157. });
  158. break;
  159. case "right_top":
  160. $.o.out.css({
  161. "top":0,
  162. "right":0,
  163. "width": xw + 'px',zIndex:$.o.s.index
  164. });
  165. break;
  166. case "right_middle":
  167. $.o.out.css({
  168. "top":"50%",
  169. "right":0,
  170. "width": xw + 'px',zIndex:$.o.s.index
  171. });
  172. if ( !($.browser.msie && $.browser.version < 7)) { // 兼容IE6
  173. $.o.out.css({marginTop: '-' + parseInt((xh / 2),10) + 'px'});
  174. }
  175. break;
  176. case "right_bottom":
  177. $.o.out.css({
  178. "bottom":0,
  179. "right":0,
  180. "width": xw + 'px',zIndex:$.o.s.index
  181. });
  182. break;
  183. case "bottom_middle":
  184. $.o.out.css({
  185. "bottom":"0",
  186. "left":"50%",
  187. "marginLeft": '-' + parseInt((xw / 2),10) + 'px',
  188. "width": xw + 'px',zIndex:$.o.s.index
  189. });
  190. break;
  191. default:
  192. $.o.out.css({
  193. "top":"50%",
  194. "left":"50%",
  195. "marginLeft": '-' + parseInt((xw / 2),10) + 'px',
  196. "width": xw + 'px',zIndex:$.o.s.index
  197. });
  198. if ( !($.browser.msie && $.browser.version < 7)) { // 兼容IE6
  199. $.o.out.css({marginTop: '-' + parseInt((xh / 2),10) + 'px'});
  200. }
  201. break;
  202. }
  203. return $.o.out;
  204. };
  205. $.skygqbox.hide = function(){
  206. if($.o.ele && $.o.out.size() && $.o.bg.size()){
  207. $.o.ele.clone(true).appendTo($("body")).hide();
  208. $.o.out.fadeOut("fast", function(){
  209. $(this).remove();
  210. });
  211. $.o.bg.fadeOut("fast", function(){
  212. $(this).remove();
  213. });
  214. }
  215. return false;
  216. };
  217. $.fn.skygqbox.Default = {
  218. title : "对话框",
  219. shut : "关闭",
  220. index : 2000,
  221. opacity : 0.5,
  222. width : "auto",
  223. height : "auto",
  224. autoClose : 0,//弹出层等待多长时间自动关闭(单位:毫秒) 0或者负数不触发自动关闭
  225. position : "middle"
  226. };
  227. })(jQuery);