weebox.js 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833
  1. // 扩展 $.browser
  2. function uaMatch(a){a=a.toLowerCase();var b=rwebkit.exec(a)||ropera.exec(a)||rmsie.exec(a)||a.indexOf("compatible")<0&&rmozilla.exec(a)||[];return{browser:b[1]||"",version:b[2]||"0"}}jQuery.extend({browser:function(){var e={},f=window.navigator.userAgent,g=uaMatch(f);return g.browser&&(e[g.browser]=!0,e.version=g.version),{browser:e}}});
  3. (function($) {
  4. var cachedata = {};
  5. var arrweebox = new Array();
  6. var weebox = function(content,options) {
  7. var self = this;
  8. this.dh = null;
  9. this.mh = null;
  10. this.dc = null;
  11. this.dt = null;
  12. this.db = null;
  13. this.selector = null;
  14. this.ajaxurl = null;
  15. this.options = null;
  16. this._dragging = false;
  17. this._content = content || '';
  18. this._options = options || {};
  19. this.ajaxresult = null;
  20. this._defaults = {
  21. boxid: null,
  22. boxclass: null,
  23. cache: false,
  24. type: 'dialog',
  25. title: '',
  26. width: 0,
  27. height: 0,
  28. timeout: 0,
  29. draggable: true,
  30. modal: true,
  31. focus: null,
  32. blur: null,
  33. position: 'center',
  34. topheight:120,
  35. overlay: 30,
  36. showTitle: true,
  37. showClose: true,
  38. showButton: true,
  39. showCancel: true,
  40. showHeader: true,
  41. showOk: true,
  42. isFull:true,
  43. isCloseToHide:false,
  44. okBtnName: '确定',
  45. cancelBtnName: '取消',
  46. contentType: 'text',
  47. contentChange: false,
  48. clickClose: false,
  49. zIndex: 999,
  50. animate: '',
  51. showAnimate:'',
  52. hideAnimate:'',
  53. onclose: null,
  54. onopen: null,
  55. onready:null,
  56. oncancel: null,
  57. onok: null,
  58. suggest:{url:'',tele:'',vele:'',fn:null},
  59. ajaxdata:null,
  60. select:{url:'',type:'radio', tele:'',vele:'',width:120,search:false,fn:null}
  61. };
  62. //初始化选项
  63. this.initOptions = function() {
  64. self._options = self._options || {};
  65. self._options.animate = self._options.animate || '';
  66. self._options.showAnimate = self._options.showAnimate || self._options.animate;
  67. self._options.hideAnimate = self._options.hideAnimate || self._options.animate;
  68. self._options.type = self._options.type || 'dialog';
  69. self._options.title = self._options.title || '';
  70. self._options.boxclass = self._options.boxclass || 'wee'+self._options.type;
  71. self._options.contentType = self._options.contentType || "";
  72. if (self._options.contentType == "") {
  73. self._options.contentType = (self._content.substr(0,1) == '#') ? 'selector' : 'text';
  74. }
  75. self.options = $.extend({}, self._defaults, self._options);
  76. self._options = null;
  77. self._defaults = null;
  78. };
  79. //初始化弹窗Box
  80. this.initBox = function() {
  81. var html = '';
  82. switch(self.options.type) {
  83. case 'alert':
  84. case 'select':
  85. case 'dialog':
  86. html = '<div class="weedialog">' +
  87. ' <div class="dialog-header">' +
  88. ' <div class="dialog-title"></div>' +
  89. ' <a href="javascript:;" onclick="return false" class="dialog-close"></a>' +
  90. ' </div>' +
  91. ' <div class="dialog-content"></div>' +
  92. ' <div class="dialog-button">' +
  93. ' <input type="button" class="btn btn-primary dialog-ok" value="确定">' +
  94. ' <input type="button" class="btn dialog-cancel" value="取消">' +
  95. ' </div>' +
  96. '</div>';
  97. break;
  98. case 'custom':
  99. case 'suggest':
  100. html = '<div><div class="dialog-content"></div></div>';
  101. break;
  102. }
  103. self.dh = $(html).appendTo('body').hide().css({
  104. position: 'absolute',
  105. overflow: 'hidden',
  106. zIndex: self.options.zIndex
  107. });
  108. self.dc = self.find('.dialog-content');
  109. self.dt = self.find('.dialog-title');
  110. self.db = self.find('.dialog-button');
  111. self.dhh = self.find('.dialog-header');
  112. if (self.options.boxid) {
  113. self.dh.attr('id', self.options.boxid);
  114. }
  115. if (self.options.boxclass) {
  116. self.dh.addClass(self.options.boxclass);
  117. }
  118. if (self.options.height>0) {
  119. self.dc.css('height', self.options.height);
  120. }
  121. if (self.options.width>0) {
  122. self.dh.css('width', self.options.width);
  123. }
  124. self.dh.bgiframe();
  125. }
  126. //初始化遮照
  127. this.initMask = function() {
  128. if (self.options.modal) {
  129. if ($.browser.msie) {
  130. h= document.compatMode == "CSS1Compat" ? document.documentElement.clientHeight : document.body.clientHeight;
  131. w= document.compatMode == "CSS1Compat" ? document.documentElement.clientWidth : document.body.clientWidth;
  132. } else {
  133. h= self.bheight();
  134. w= self.bwidth();
  135. }
  136. self.mh = $("<div class='dialog-mask'></div>")
  137. .appendTo('body').hide().css({
  138. width: w,
  139. height: h,
  140. zIndex: self.options.zIndex-1
  141. }).bgiframe();
  142. }
  143. }
  144. //初始化弹窗内容
  145. this.initContent = function(content) {
  146. self.dh.find(".dialog-ok").val(self.options.okBtnName);
  147. self.dh.find(".dialog-cancel").val(self.options.cancelBtnName);
  148. if (self.options.title == '') {
  149. //self.dt.hide();
  150. //self.dt.html(self._titles[self._options.type] || '');
  151. } else {
  152. self.dt.html(self.options.title);
  153. }
  154. if (!self.options.showTitle) {
  155. self.dt.hide();
  156. }
  157. if(self.options.draggable){
  158. self.dt.css({"cursor":"move"});
  159. }
  160. if(!self.options.showHeader){
  161. self.dhh.remove();
  162. }
  163. if(!self.options.showClose){
  164. self.dhh.find('.dialog-close').hide();
  165. }
  166. if (!self.options.showCancel) {
  167. self.dhh.find('.dialog-cancel').hide();
  168. }
  169. if (!self.options.showButton) {
  170. self.dh.find('.dialog-button').hide();
  171. }
  172. if (!self.options.showOk) {
  173. self.dh.find(".dialog-ok").hide();
  174. }
  175. if (self.options.type == 'suggest') {//例外处理
  176. self.hide();
  177. //self.options.clickClose = true;
  178. $(self.options.suggest.tele).unbind('keyup').keyup(function(){
  179. var val = $.trim(this.value);
  180. var data = null;
  181. for(key in cachedata) {
  182. if (key == val) {
  183. data = cachedata[key];
  184. }
  185. }
  186. if (data === null) {
  187. $.ajax({
  188. type: "GET",
  189. data:{q:val},
  190. url: self.options.suggest.url || self._content,
  191. success: function(res){data = res;},
  192. dataType:'json',
  193. async: false
  194. });
  195. }
  196. cachedata[val] = data;
  197. var html = '';
  198. for(key in data) {
  199. html += '<li>'+data[key].name+'</li>';
  200. }
  201. self.show();
  202. self.setContent(html);
  203. self.find('li').click(function(){
  204. var i = self.find('li').index(this);
  205. $(self.options.suggest.tele).val(data[i].name);
  206. $(self.options.suggest.vele).val(data[i].id);
  207. if (typeof self.options.suggest.fn == 'function') {
  208. fn(data[i]);
  209. }
  210. self.hide();
  211. });
  212. });
  213. } else if(self.options.type == 'select') {
  214. var type = self.options.select.type || 'radio';
  215. var url = self.options.select.url || self._content || '';
  216. var search = self.options.select.search || false;
  217. $.ajax({
  218. type: "GET",
  219. url: url,
  220. success: function(data){
  221. var html = '';
  222. if (data === null) {
  223. html = '没有数据';
  224. } else {
  225. if (search) {
  226. html += '<div class="wsearch"><input type="text"><input type="button" value="查询"></div>';
  227. }
  228. var ovals = $.trim($(self.options.select.vele).val()).split(',');//原值
  229. html += '<div class="wselect">';
  230. for(key in data) {
  231. var checked = ($.inArray(data[key].id, ovals)==-1)?'':'checked="checked"';
  232. html += '<li><label><input name="wchoose" '+checked+' type="'+type+'" value="'+data[key].id+'">'+data[key].name+'</label></li>';
  233. }
  234. html += '</div>';
  235. }
  236. self.show();
  237. self.setContent(html);
  238. self.find('li').width(self.options.select.width);
  239. self.find('.wsearch input').keyup(function(){
  240. var v = $.trim(this.value);
  241. self.find('li').hide();
  242. for(i in data) {
  243. if (data[i].id==v || data[i].name.indexOf(v)!=-1) {
  244. self.find('li:eq('+i+')').show();
  245. }
  246. }
  247. });
  248. self.setOnok(function(){
  249. if (type=='radio') {
  250. if (self.find(':checked').length == 0) {
  251. $(self.options.select.tele).val('');
  252. $(self.options.select.vele).val('');
  253. } else {
  254. var i = self.find(':radio[name=wchoose]').index(self.find(':checked')[0]);
  255. $(self.options.select.tele).val(data[i].name);
  256. $(self.options.select.vele).val(data[i].id);
  257. if (typeof self.options.select.fn == 'function') fn(data[i]);
  258. }
  259. } else {
  260. if (self.find(':checked').length == 0) {
  261. $(self.options.select.tele).val('');
  262. $(self.options.select.vele).val('');
  263. } else {
  264. var temps=[],ids=[],names=[];
  265. self.find(':checked').each(function(){
  266. var i = self.find(':checkbox[name=wchoose]').index(this);
  267. temps.push(data[i]);
  268. ids.push(data[i].id);
  269. names.push(data[i].name);
  270. });
  271. $(self.options.select.tele).val(names.join(","));
  272. $(self.options.select.vele).val(ids.join(","));
  273. if (typeof self.options.select.fn == 'function') fn(temps);
  274. }
  275. }
  276. self.close();
  277. });
  278. },
  279. dataType:'json'
  280. });
  281. } else {
  282. if (self.options.contentType == "selector") {
  283. self.show();
  284. self.selector = self._content;
  285. self._content = $(self.selector).html();
  286. self.setContent(self._content);
  287. //if have checkbox do
  288. var cs = $(self.selector).find(':checkbox');
  289. self.dc.find(':checkbox').each(function(i){
  290. this.checked = cs[i].checked;
  291. });
  292. $(self.selector).empty();
  293. self.focus();
  294. self.onopen();
  295. } else if (self.options.contentType == "ajax") {
  296. self.ajaxurl = self._content;
  297. self.show();
  298. self.setLoading();
  299. self.dh.find(".dialog-button").hide();
  300. if (self.options.cache == false) {
  301. if (self.ajaxurl.indexOf('?') == -1) {
  302. self.ajaxurl += "?_t="+Math.random();
  303. } else {
  304. self.ajaxurl += "&_t="+Math.random();
  305. }
  306. }
  307. if(self.options.ajaxdata == null)
  308. {
  309. $.get(self.ajaxurl,function(data){
  310. self._content = data;
  311. self.show();
  312. self.setContent(self._content);
  313. self.focus();
  314. self.onopen();
  315. //计算高度
  316. self.setTopPosition();
  317. });
  318. }
  319. else
  320. {
  321. $.post(self.ajaxurl,self.options.ajaxdata,function(result) {
  322. self._content = result.html;
  323. delete result.html;
  324. self.ajaxresult = result;
  325. self.show();
  326. self.setContent(self._content);
  327. self.focus();
  328. self.onopen();
  329. },"json");
  330. }
  331. } else if (self.options.contentType == "iframe") { /*加入iframe使程序可以直接引用其它页面 by ePim*/
  332. var html = '<style type="text/css">';
  333. html += ('\n.dialog-box .dialog-content{padding:0px;}');
  334. html += ('\n</style>');
  335. html += ('<iframe class="dialogIframe" src="'+self._content+'" width="100%" height="100%" frameborder="0"></iframe>');
  336. self.show();
  337. self.setContent(html);
  338. self.onopen();
  339. } else {
  340. self.show();
  341. self.setContent(self._content);
  342. self.focus();
  343. self.onopen();
  344. }
  345. }
  346. self.setCenterPosition();
  347. }
  348. //初始化弹窗事件
  349. this.initEvent = function() {
  350. self.dh.find(".dialog-close,.dialog-cancel, .dialog-ok").unbind('click').click(function(){self.close()});
  351. if (typeof(self.options.onok) == "function") {
  352. self.dh.find(".dialog-ok").unbind('click').click(function(){self.options.onok(self)});
  353. }
  354. if (typeof(self.options.oncancel) == "function") {
  355. self.dh.find(".dialog-cancel").unbind('click').click(function(){self.options.oncancel(self)});
  356. }
  357. if (self.options.timeout>0) {
  358. window.setTimeout(self.close, (self.options.timeout * 1000));
  359. }
  360. this.drag();
  361. }
  362. //设置onok事件
  363. this.setOnok = function(fn) {
  364. self.dh.find(".dialog-ok").unbind('click');
  365. if (typeof(fn)=="function") self.dh.find(".dialog-ok").click(function(){fn(self)});
  366. }
  367. //设置onOncancel事件
  368. this.setOncancel = function(fn) {
  369. self.dh.find(".dialog-cancel").unbind('click');
  370. if (typeof(fn)=="function") self.dh.find(".dialog-cancel").click(function(){fn(self)});
  371. }
  372. //设置onOnclose事件
  373. this.setOnclose = function(fn) {
  374. self.options.onclose = fn;
  375. }
  376. //弹窗拖拽
  377. this.drag = function() {
  378. if (self.options.draggable && self.options.showTitle) {
  379. self.dh.find('.dialog-header').mousedown(function(event){
  380. var h = this;
  381. var o = document;
  382. var ox = self.dh.position().left;
  383. var oy = self.dh.position().top;
  384. var mx = event.clientX;
  385. var my = event.clientY;
  386. var width = self.dh.width();
  387. var height = self.dh.height();
  388. var bwidth = self.bwidth();
  389. var bheight = self.bheight();
  390. if(h.setCapture) {
  391. h.setCapture();
  392. }
  393. $(document).mousemove(function(event){
  394. if (window.getSelection) {
  395. window.getSelection().removeAllRanges();
  396. } else {
  397. document.selection.empty();
  398. }
  399. //TODO
  400. var left = Math.max(ox+event.clientX-mx, 0);
  401. var top = Math.max(oy+event.clientY-my, 0);
  402. var left = Math.min(left, bwidth-width);
  403. var top = Math.min(top, bheight-height);
  404. self.dh.css({left: left, top: top});
  405. }).mouseup(function(){
  406. if(h.releaseCapture) {
  407. h.releaseCapture();
  408. }
  409. $(document).unbind('mousemove');
  410. $(document).unbind('mouseup');
  411. });
  412. });
  413. }
  414. }
  415. //打开前的回弹函数
  416. this.onopen = function() {
  417. if (typeof(self.options.onopen) == "function") {
  418. self.options.onopen(self);
  419. }
  420. }
  421. //增加一个按钮
  422. this.addButton = function(opt) {
  423. opt = opt || {};
  424. opt.title = opt.title || 'OK';
  425. opt.bclass = opt.bclass || 'dialog-btn1';
  426. opt.fn = opt.fn || null;
  427. opt.index = opt.index || 0;
  428. var btn = $('<input type="button" class="'+opt.bclass+'" value="'+opt.title+'">').click(function(){
  429. if (typeof opt.fn == "function") opt.fn(self);
  430. });
  431. if (opt.index < self.db.find('input').length) {
  432. self.db.find('input:eq('+opt.index+')').before(btn);
  433. } else {
  434. self.db.append(opt);
  435. }
  436. }
  437. //显示弹窗
  438. this.show = function() {
  439. if (self.options.showButton) {
  440. self.dh.find('.dialog-button').show();
  441. }
  442. if (self.options.position == 'center') {
  443. self.setCenterPosition();
  444. }
  445. else if(self.options.position == 'top') {
  446. self.setTopPosition();
  447. } else {
  448. self.setElementPosition();
  449. }
  450. if (typeof self.options.showAnimate == "string") {
  451. if (self.options.animate) {
  452. self.dh.show(self.options.animate);
  453. } else {
  454. self.dh.show();
  455. }
  456. } else {
  457. self.dh.animate(self.options.showAnimate.animate, self.options.showAnimate.speed);
  458. }
  459. if (self.mh) {
  460. self.mh.show();
  461. }
  462. }
  463. this.hide = function(fn) {
  464. if (typeof self.options.hideAnimate == "string") {
  465. self.dh.hide(self.options.animate, fn);
  466. } else {
  467. self.dh.animate(self.options.hideAnimate.animate, self.options.hideAnimate.speed, "", fn);
  468. }
  469. }
  470. //设置弹窗焦点
  471. this.focus = function() {
  472. if (self.options.focus) {
  473. self.dh.find(self.options.focus).focus();//TODO IE中要两次
  474. self.dh.find(self.options.focus).focus();
  475. } else {
  476. self.dh.find('.dialog-cancel').focus();
  477. }
  478. }
  479. //在弹窗内查找元素
  480. this.find = function(selector) {
  481. return self.dh.find(selector);
  482. }
  483. //设置加载加状态
  484. this.setLoading = function() {
  485. self.dh.find(".dialog-button").hide();
  486. self.setContent('<div class="dialog-loading"></div>',true);
  487. }
  488. this.setWidth = function(width) {
  489. self.dh.width(width);
  490. }
  491. //设置标题
  492. this.setTitle = function(title) {
  493. self.dt.html(title);
  494. }
  495. //取得标题
  496. this.getTitle = function() {
  497. return self.dt.html();
  498. }
  499. //设置内容
  500. this.setContent = function(content,isLoading) {
  501. self.dc.html(content);
  502. if (self.options.height>0) {
  503. self.dc.css('height', self.options.height);
  504. } else {
  505. self.dc.css('height','auto');
  506. }
  507. if (self.options.width>0) {
  508. self.dh.css('width', self.options.width);
  509. } else {
  510. self.dh.css('width','');
  511. }
  512. if (self.options.showButton) {
  513. self.dh.find(".dialog-button").show();
  514. }
  515. if (self.dc.height() < 60) {
  516. self.dc.height(60);
  517. }
  518. if(isLoading !== true)
  519. {
  520. self.dc.ready(function(){
  521. if(self.options.isFull)
  522. self.dc.height(self.dc.get(0).scrollHeight);
  523. if (self.options.onready != null)
  524. self.options.onready(self);
  525. });
  526. }
  527. }
  528. //取得内容
  529. this.getContent = function() {
  530. return self.dc.html();
  531. }
  532. //使能按钮
  533. this.disabledButton = function(btname, state) {
  534. self.dh.find('.dialog-'+btname).attr("disabled", state);
  535. }
  536. //隐藏按钮
  537. this.hideButton = function(btname) {
  538. self.dh.find('.dialog-'+btname).hide();
  539. }
  540. //显示按钮
  541. this.showButton = function(btname) {
  542. self.dh.find('.dialog-'+btname).show();
  543. }
  544. //显示关闭
  545. this.showClose = function(btname) {
  546. self.dhh.find('.dialog-'+btname).show();
  547. }
  548. //设置按钮标题
  549. this.setButtonTitle = function(btname, title) {
  550. self.dh.find('.dialog-'+btname).val(title);
  551. }
  552. //操作完成
  553. this.next = function(opt) {
  554. opt = opt || {};
  555. opt.title = opt.title || self.getTitle();
  556. opt.content = opt.content || "";
  557. opt.okname = opt.okname || "确定";
  558. opt.width = opt.width || 260;
  559. opt.onok = opt.onok || self.close;
  560. opt.onclose = opt.onclose || null;
  561. opt.oncancel = opt.oncancel || null;
  562. opt.hideCancel = opt.hideCancel || true;
  563. self.setTitle(opt.title);
  564. self.setButtonTitle("ok", okname);
  565. self.setWidth(width);
  566. self.setOnok(opt.onok);
  567. self.show();
  568. if (opt.content != "") self.setContent(opt.content);
  569. if (opt.hideCancel) self.hideButton("cancel");
  570. if (typeof(opt.onclose) == "function") self.setOnclose(opt.onclose);
  571. if (typeof(opt.oncancel) == "function") self.setOncancel(opt.oncancel);
  572. }
  573. //关闭弹窗
  574. this.close = function(n) {
  575. if(self.options.isCloseToHide)
  576. {
  577. self.hide();
  578. self.mh.hide();
  579. return;
  580. }
  581. if (typeof(self.options.onclose) == "function") {
  582. self.options.onclose(self);
  583. }
  584. if (self.options.contentType == 'selector') {
  585. if (self.options.contentChange) {
  586. //if have checkbox do
  587. var cs = self.find(':checkbox');
  588. $(self.selector).html(self.getContent());
  589. if (cs.length > 0) {
  590. $(self.selector).find(':checkbox').each(function(i){
  591. this.checked = cs[i].checked;
  592. });
  593. }
  594. } else {
  595. $(self.selector).html(self._content);
  596. }
  597. } else if(self.options.contentType == "iframe") {
  598. var iframe = self.dh.find(".dialogIframe");
  599. iframe.removeAttr("src");
  600. }
  601. //设置关闭后的焦点
  602. if (self.options.blur) {
  603. $(self.options.blur).focus();
  604. }
  605. //从数组中删除
  606. for(i=0;i<arrweebox.length;i++) {
  607. if (arrweebox[i].dh.get(0) == self.dh.get(0)) {
  608. arrweebox.splice(i, 1);
  609. break;
  610. }
  611. }
  612. self.hide();
  613. self.dh.remove();
  614. if (self.mh) {
  615. self.mh.remove();
  616. }
  617. }
  618. //取得遮照高度
  619. this.bheight = function() {
  620. if ($.browser.msie && $.browser.version < 7) {
  621. var scrollHeight = Math.max(
  622. document.documentElement.scrollHeight,
  623. document.body.scrollHeight
  624. );
  625. var offsetHeight = Math.max(
  626. document.documentElement.offsetHeight,
  627. document.body.offsetHeight
  628. );
  629. if (scrollHeight < offsetHeight) {
  630. return $(window).height();
  631. } else {
  632. return scrollHeight;
  633. }
  634. } else {
  635. return $(document).height();
  636. }
  637. }
  638. //取得遮照宽度
  639. this.bwidth = function() {
  640. if ($.browser.msie && $.browser.version < 7) {
  641. var scrollWidth = Math.max(
  642. document.documentElement.scrollWidth,
  643. document.body.scrollWidth
  644. );
  645. var offsetWidth = Math.max(
  646. document.documentElement.offsetWidth,
  647. document.body.offsetWidth
  648. );
  649. if (scrollWidth < offsetWidth) {
  650. return $(window).width();
  651. } else {
  652. return scrollWidth;
  653. }
  654. } else {
  655. return $(document).width();
  656. }
  657. }
  658. //将弹窗显示在中间位置
  659. this.setCenterPosition = function() {
  660. var wnd = $(window), doc = $(document),
  661. pTop = doc.scrollTop(), pLeft = doc.scrollLeft();
  662. pTop += (wnd.height() - self.dh.height()) / 2;
  663. pLeft += (wnd.width() - self.dh.width()) / 2;
  664. self.dh.css({top: pTop, left: pLeft});
  665. }
  666. this.setTopPosition = function() {
  667. var wnd = $(window), doc = $(document),
  668. pTop = doc.scrollTop(), pLeft = doc.scrollLeft();
  669. pTop += self.options.topheight;
  670. pLeft += (wnd.width() - self.dh.width()) / 2;
  671. self.dh.css({top: pTop, left: pLeft});
  672. }
  673. //根据元素设置弹窗显示位置
  674. this.setElementPosition = function() {
  675. var trigger = $(self.options.position.refele);
  676. var reftop = self.options.position.reftop || 0;
  677. var refleft = self.options.position.refleft || 0;
  678. var adjust = (typeof self.options.position.adjust=="undefined")?true:self.options.position.adjust;
  679. var top = trigger.offset().top + trigger.height();
  680. if(self.options.addtop != null && self.options.addtop != 0)
  681. top += self.options.addtop;
  682. var left = trigger.offset().left;
  683. var docWidth = document.documentElement.clientWidth || document.body.clientWidth;
  684. var docHeight = document.documentElement.clientHeight|| document.body.clientHeight;
  685. var docTop = document.documentElement.scrollTop|| document.body.scrollTop;
  686. var docLeft = document.documentElement.scrollLeft|| document.body.scrollLeft;
  687. var docBottom = docTop + docHeight;
  688. var docRight = docLeft + docWidth;
  689. if (adjust && left + self.dh.width() > docRight) {
  690. left = docRight - self.dh.width() - 1;
  691. }
  692. if (adjust && top + self.dh.height() > docBottom) {
  693. top = docBottom - self.dh.height() - 1;
  694. }
  695. left = Math.max(left+refleft, 0);
  696. top = Math.max(top+reftop, 0);
  697. self.dh.css({top: top, left: left});
  698. }
  699. this.initOptions();
  700. this.initMask();
  701. this.initBox();
  702. this.initContent();
  703. this.initEvent();
  704. }
  705. var weeboxs = function() {
  706. var self = this;
  707. this._onbox = false;
  708. this._opening = false;
  709. this.zIndex = 999;
  710. this.length = function() {
  711. return arrweebox.length;
  712. }
  713. this.open = function(content, options) {
  714. self._opening = true;
  715. if (typeof(options) == "undefined") {
  716. options = {};
  717. }
  718. if (options.boxid) {
  719. for(var i=0; i<arrweebox.length; i++) {
  720. if (arrweebox[i].dh.attr('id') == options.boxid) {
  721. arrweebox[i].close();
  722. break;
  723. }
  724. }
  725. }
  726. options.zIndex = self.zIndex;
  727. self.zIndex += 10;
  728. var box = new weebox(content, options);
  729. box.dh.click(function(){self._onbox = true;});
  730. arrweebox.push(box);
  731. /*-----解决在ie下页面过大时出现部分阴影没有覆盖的问题-----by ePim*/
  732. if (box.options.position != "center" && box.options.position != "top"){
  733. box.setElementPosition();
  734. }
  735. if (box.mh) {
  736. box.mh.css({
  737. width: box.bwidth(),
  738. height: box.bheight()
  739. });
  740. }
  741. /*-----解决在ie下页面过大时出现部分没有遮罩的问题-----by ePim(WanJiDong@gmail.com)*/
  742. return box;
  743. }
  744. //关闭最上层窗体,程序调用方法:jQuery.weeboxs.close();
  745. this.close = function(){
  746. var closingBox = this.getTopBox();
  747. if(false!=closingBox) {
  748. closingBox.close();
  749. }
  750. }
  751. this.getTopBox = function() {
  752. if (arrweebox.length>0) {
  753. return arrweebox[arrweebox.length-1];
  754. } else {
  755. return false;
  756. }
  757. }
  758. $(window).scroll(function() {
  759. if (arrweebox.length > 0) {
  760. for(i=0;i<arrweebox.length;i++) {
  761. var box = arrweebox[i];//self.getTopBox();
  762. if (box.options.position == "center") {
  763. box.setCenterPosition();
  764. }
  765. else if(box.options.position == "top") {
  766. box.setTopPosition();
  767. }
  768. else{
  769. box.setElementPosition();
  770. }
  771. if (box.mh) {
  772. box.mh.css({
  773. width: box.bwidth(),
  774. height: box.bheight()
  775. });
  776. }
  777. }
  778. }
  779. }).resize(function() {
  780. if (arrweebox.length > 0) {
  781. var box = self.getTopBox();
  782. if (box.options.position == "center") {
  783. box.setCenterPosition();
  784. }
  785. else if(box.options.position == 'top') {
  786. box.setTopPosition();
  787. }
  788. if (box.mh) {
  789. box.mh.css({
  790. width: box.bwidth(),
  791. height: box.bheight()
  792. });
  793. }
  794. }
  795. });
  796. $(document).click(function(event) {
  797. if (event.button==2) return true;
  798. if (arrweebox.length>0) {
  799. var box = self.getTopBox();
  800. if(!self._opening && !self._onbox && box.options.clickClose) {
  801. box.close();
  802. }
  803. }
  804. self._opening = false;
  805. self._onbox = false;
  806. });
  807. }
  808. $.extend({weeboxs: new weeboxs()});
  809. })(jQuery);