zeroModal.js 31 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869
  1. /*!
  2. * zeroModal.js
  3. * http://git.oschina.net/cylansad/zeroModal
  4. *
  5. * Copyright 2016, Sad
  6. */
  7. (function(obj) {
  8. if (typeof module !== 'undefined' && typeof exports === 'object' && define.cmd) {
  9. module.exports = obj;
  10. } else if (typeof define === 'function' && define.amd) {
  11. define(function() {
  12. return obj;
  13. });
  14. } else {
  15. window.zeroModal = obj;
  16. }
  17. }((function($, undefined) {
  18. var zeroModal = {};
  19. /**
  20. * 默认的参数
  21. * @type {Object}
  22. */
  23. var defaultOpt = {
  24. unique: '', // 模态框的唯一值,默认系统生成UUID,不建议自定义
  25. title: '', //标题
  26. content: '', //显示内容
  27. url: false, //如果输入url,将会根据url返回的内容显示在弹出层中
  28. iframe: false, //是否需要嵌入iframe,默认false,该参数需要和url一起使用
  29. width: '500px', //宽度(px、pt、%)
  30. height: '300px', //高度(px、pt、%)
  31. transition: false, //是否需要出场动画,默认false
  32. opacity: 0.2, // 遮罩层的透明度
  33. overlay: true, //是否需要显示遮罩层,默认true
  34. overlayClose: false, //是否允许点击遮罩层直接关闭弹出层,默认否
  35. max: false, // 是否允许最大化
  36. resize: false, // 是否允许调整大小
  37. resizeAfterFn: undefined, // 调整大小后触发的事件
  38. ok: false, //是否启用“ok”按钮,默认false
  39. okTitle: "", //“ok”按钮的显示值,默认为“确定”
  40. okFn: false, //点击“ok”按钮触发的事件
  41. cancel: false, //是否启用“cancel”按钮,默认false
  42. cancelTitle: "", //“cancel”按钮的显示值,默认为“取消”
  43. cancelFn: true, //点击“cancel”按钮触发的事件
  44. buttonTopLine: true,
  45. buttons: [], //自定义的按钮,使用了自定义按钮ok与cancel按钮将不会生效;格式:[{ className: 'zeromodal-btn zeromodal-btn-primary', name: '开始导出' }]
  46. esc: false, //是否需要按esc键退出弹出层,默认false
  47. //callbacks
  48. onOpen: false, //弹出层弹开前事件
  49. onLoad: false, //弹出层加载显示内容前事件
  50. onComplete: false, //弹出层加载显示内容后事件
  51. onCleanup: false, //弹出层关闭前事件
  52. onClosed: false //弹出层关闭后事件
  53. };
  54. // 临时变量,是否已显示
  55. var _tmp_variate_ishow = false;
  56. // 临时变量,最后的zindex值
  57. var _tmp_last_zindex = 1000;
  58. // 临时变量,记录打开的模态框参数
  59. var _tmp_zemoModal_opt = {};
  60. /**
  61. * 显示模态框
  62. * @param {[type]} opt [description]
  63. * @return {[type]} [description]
  64. */
  65. zeroModal.show = function(opt) {
  66. // 初始化
  67. var params = _initParams(opt);
  68. // 渲染
  69. _render(params);
  70. // 重新定位
  71. _tmp_variate_ishow = true;
  72. $(window).resize(function() {
  73. if (_tmp_variate_ishow) {
  74. _resize(params);
  75. }
  76. });
  77. return params.unique;
  78. };
  79. /**
  80. * 关闭指定模态框
  81. * @param {[type]} unique [description]
  82. * @return {[type]} [description]
  83. */
  84. zeroModal.close = function(unique) {
  85. //_close({ unique: unique }); old code 2022.3.25
  86. _close(_tmp_zemoModal_opt[unique]);
  87. _tmp_variate_ishow = false;
  88. delete _tmp_zemoModal_opt[unique];
  89. };
  90. /**
  91. * 关闭全部模态框
  92. * @return {[type]} [description]
  93. */
  94. zeroModal.closeAll = function() {
  95. $('[role="zeromodal-loading"]').remove();
  96. $('.zeromodal-overlay').remove();
  97. $('.zeromodal-container').each(function() {
  98. var jobj = $(this);
  99. var unique = jobj.attr("zero-unique-container");
  100. if (unique !== undefined && _tmp_zemoModal_opt[unique] !== undefined) {
  101. var opt = _tmp_zemoModal_opt[unique];
  102. if (typeof opt.onCleanup === 'function') {
  103. opt.onCleanup();
  104. }
  105. jobj.remove();
  106. if (typeof opt.onClosed === 'function') {
  107. opt.onClosed();
  108. }
  109. delete _tmp_zemoModal_opt[unique];
  110. }
  111. });
  112. _tmp_variate_ishow = false;
  113. };
  114. /**
  115. * 显示等待框
  116. * @return {[type]} [description]
  117. */
  118. zeroModal.loading = function(type) {
  119. var params = _initParams();
  120. _buildOverlay(params);
  121. _tmp_last_zindex++;
  122. // 重新定位top值
  123. var _top = $(window).scrollTop() + Math.ceil($(window).height() / 3);
  124. if (type === undefined) {
  125. type = 1;
  126. }
  127. if (type === 1 || type === 2) {
  128. var loadClass = 'zeromodal-loading' + type;
  129. $('body').append('<div role="zeromodal-loading" zero-unique-loading="' + params.unique + '" class="' + loadClass + '" style="z-index:' + _tmp_last_zindex + ';top:' + _top + 'px;"></div>');
  130. } else if (_isIn([3, 4, 5, 6], type)) {
  131. var loader = {};
  132. switch (type) {
  133. case 3:
  134. loader.className = 'pacman';
  135. loader.containerCount = 5;
  136. break;
  137. case 4:
  138. loader.className = 'line-scale-pulse-out';
  139. loader.containerCount = 5;
  140. break;
  141. case 5:
  142. loader.className = 'line-spin-fade-loader';
  143. loader.containerCount = 8;
  144. break;
  145. case 6:
  146. loader.className = 'square-spin';
  147. loader.containerCount = 1;
  148. break;
  149. }
  150. var _html = '<div role="zeromodal-loading" zero-unique-loading="' + params.unique + '" class="' + loader.className + '" style="z-index:' + _tmp_last_zindex + ';left:46%;top:' + _top + 'px;">';
  151. for (var i = 0; i < loader.containerCount; i++) {
  152. _html += ' <div></div>';
  153. }
  154. _html += ' </div>';
  155. $('body').append(_html);
  156. }
  157. return params.unique;
  158. };
  159. zeroModal.progress = function(type, opt) {
  160. var params = _initParams();
  161. _buildOverlay(params);
  162. _tmp_last_zindex++;
  163. if (type === undefined) {
  164. type = 3;
  165. }
  166. // 重新定位top值
  167. var _top = $(window).scrollTop() + Math.ceil($(window).height() / 3);
  168. var loader = {};
  169. switch (type) {
  170. case 3:
  171. loader.className = 'pacman';
  172. loader.containerCount = 5;
  173. break;
  174. case 4:
  175. loader.className = 'line-scale-pulse-out';
  176. loader.containerCount = 5;
  177. break;
  178. case 5:
  179. loader.className = 'line-spin-fade-loader';
  180. loader.containerCount = 8;
  181. break;
  182. case 6:
  183. loader.className = 'square-spin';
  184. loader.containerCount = 1;
  185. break;
  186. }
  187. var _html = '<div zero-unique-loading="' + params.unique + '" class="' + loader.className + '" style="z-index:' + _tmp_last_zindex + ';left:46%;top:' + _top + 'px;">';
  188. for (var i = 0; i < loader.containerCount; i++) {
  189. _html += ' <div></div>';
  190. }
  191. _html += ' </div>';
  192. _html += ' <div zero-unique-loading="' + params.unique + '" class="zeromodal-progress-content" style="z-index:' + _tmp_last_zindex + ';top:' + (_top + 64) + 'px;"><span id="progess_content_' + params.unique + '"></span></div>';
  193. _html += '';
  194. $('body').append(_html);
  195. var _loadCount = 0;
  196. var _timer = setInterval(function() {
  197. $.ajax({
  198. url: opt.getProgressUrl + "?_=" + new Date().getTime(),
  199. dataType: 'json',
  200. type: 'get',
  201. success: function(data) {
  202. $('#progess_content_' + params.unique).html(data.progress);
  203. if (data.progress === 'finish') {
  204. clearInterval(_timer);
  205. $.get(opt.clearProgressUrl);
  206. zeroModal.close(params.unique);
  207. }
  208. }
  209. });
  210. _loadCount++;
  211. if (_loadCount >= 500) {
  212. clearInterval(_timer);
  213. //zeroModal.close(params.unique);
  214. }
  215. }, 500);
  216. return params.unique;
  217. };
  218. /**
  219. * 显示进度条
  220. * @param {[type]} speed [description]
  221. * @return {[type]} [description]
  222. */
  223. zeroModal.progress_old = function(speed) {
  224. var params = _initParams();
  225. _buildOverlay(params);
  226. _tmp_last_zindex++;
  227. var _top = $(window).scrollTop() + Math.ceil($(window).height() / 3);
  228. var _left = $(window).width() / 2 - 200;
  229. var _speed = 1;
  230. if (speed !== undefined && speed > _speed && speed < 10) {
  231. _speed = speed;
  232. }
  233. var _html = '<div class="zeromodal-progress" style="top:' + _top + 'px;left:' + _left + 'px;z-index:' + _tmp_last_zindex + '">';
  234. _html += ' <div zeromodal-progress-bar="' + params.unique + '" class="zeromodal-progress-bar" style="width: 0%; background: #92c26a;">';
  235. _html += ' <span class="zeromodal-progress-icon zeromodal-fa zeromodal-fa-check" style="border-color:#92c26a; color:#92c26a;"><div zeromodal-progress-val="' + params.unique + '" class="zeromodal-progress-val">&nbsp;0%</div></span>';
  236. _html += ' </div>';
  237. _html += ' </div>';
  238. $('body').append(_html);
  239. var _progress = 0;
  240. var jProgressBar = $('[zeromodal-progress-bar="' + params.unique + '"]');
  241. var jProgressVal = $('[zeromodal-progress-val="' + params.unique + '"]');
  242. var _timer = setInterval(function() {
  243. _progress += 1;
  244. jProgressBar.css("width", _progress + "%");
  245. jProgressVal.html((_progress > 9 ? _progress : '&nbsp;' + _progress) + '%');
  246. if (_progress >= 100) {
  247. jProgressVal.html('<span class="line tip"></span><span class="line long"></span>');
  248. clearInterval(_timer);
  249. }
  250. }, _speed * 100);
  251. return params.unique;
  252. };
  253. /**
  254. * 显示alert框
  255. * @param {[type]} content [description]
  256. * @return {[type]} [description]
  257. */
  258. zeroModal.alert = function(content) {
  259. var _opt = {
  260. iconClass: 'show-zero2 zeromodal-icon-info',
  261. iconText: '!'
  262. };
  263. var params = {};
  264. $.extend(params, _opt);
  265. if (typeof content === 'object') {
  266. $.extend(params, content);
  267. } else {
  268. params.content = content;
  269. }
  270. _buildAlertInfo(params);
  271. };
  272. /**
  273. * 显示错误alert框
  274. * @param {[type]} content [description]
  275. * @return {[type]} [description]
  276. */
  277. zeroModal.error = function(content) {
  278. var params = {
  279. iconDisplay: '<div class="show-zero2 zeromodal-icon zeromodal-error"><span class="x-mark"><span class="line left"></span><span class="line right"></span></span></div>'
  280. };
  281. if (typeof content === 'object') {
  282. $.extend(params, content);
  283. } else {
  284. params.content = content;
  285. }
  286. _buildAlertInfo(params);
  287. };
  288. /**
  289. * 显示正确alert框
  290. * @param {[type]} content [description]
  291. * @return {[type]} [description]
  292. */
  293. zeroModal.success = function(content) {
  294. var params = {
  295. iconDisplay: '<div class="show-zero2 zeromodal-icon zeromodal-success"></div>'
  296. };
  297. if (typeof content === 'object') {
  298. $.extend(params, content);
  299. } else {
  300. params.content = content;
  301. }
  302. _buildAlertInfo(params);
  303. };
  304. /**
  305. * 显示confirm框
  306. * @param {[type]} content [description]
  307. * @param {[type]} okFn [description]
  308. * @return {[type]} [description]
  309. */
  310. zeroModal.confirm = function(content, okFn) {
  311. var _opt = {
  312. iconClass: 'show-zero2 zeromodal-icon-question',
  313. iconText: '?',
  314. };
  315. var params = {};
  316. $.extend(params, _opt);
  317. if (typeof okFn === 'function') {
  318. params.okFn = okFn;
  319. }
  320. params.cancel = true;
  321. if (typeof content === 'object') {
  322. $.extend(params, content);
  323. } else {
  324. params.content = content;
  325. }
  326. _buildAlertInfo(params);
  327. };
  328. // 初始化
  329. function _initParams(opt) {
  330. var params = {};
  331. $.extend(params, defaultOpt);
  332. $.extend(params, opt);
  333. if (typeof params.unique === 'undefined' || params.unique === '') {
  334. params.unique = _getUuid();
  335. }
  336. // 将参数记录到临时变量中
  337. _tmp_zemoModal_opt[params.unique] = params;
  338. return params;
  339. }
  340. // 渲染
  341. function _render(opt) {
  342. if (typeof opt.onOpen === 'function') { opt.onOpen(); }
  343. _buildOverlay(opt);
  344. _buildModal(opt);
  345. $(".zeromodal-overlay").height($("html").height())
  346. }
  347. // 关闭
  348. function _close(opt) {
  349. if (typeof opt === 'object') {
  350. if (typeof opt.onCleanup === 'function') {
  351. opt.onCleanup();
  352. }
  353. $('[zero-unique-overlay="' + opt.unique + '"]').remove();
  354. $('[zero-unique-container="' + opt.unique + '"]').remove();
  355. $('[zero-unique-loading="' + opt.unique + '"]').remove();
  356. if (typeof opt.onClosed === 'function') {
  357. opt.onClosed();
  358. }
  359. }
  360. }
  361. /**
  362. * 构建遮罩层
  363. * @param {[type]} opt [description]
  364. * @return {[type]} [description]
  365. */
  366. function _buildOverlay(opt) {
  367. _tmp_last_zindex++;
  368. var _width = $(document).width();
  369. var _height = $(document).height();
  370. // 是否需要显示遮罩层
  371. if (opt.overlay) {
  372. //var _overlay = $('<div zero-unique-overlay="' + opt.unique + '" class="zeromodal-overlay" style="opacity:' + opt.opacity + ';z-index:' + _tmp_last_zindex + ';width:' + _width + 'px;height:' + _height + 'px"></div>');
  373. var _overlay = $('<div zero-unique-overlay="' + opt.unique + '" class="zeromodal-overlay" style="opacity:' + opt.opacity + ';z-index:' + _tmp_last_zindex + ';left:0px;right:0px;top:0px;bottom:0px;height:auto;"></div>');
  374. $('body').append(_overlay);
  375. // 是否允许点击遮罩层关闭modal
  376. if (opt.overlayClose) {
  377. _overlay.css('cursor', 'pointer');
  378. _overlay.click(function() {
  379. _close(opt);
  380. });
  381. } else {
  382. _overlay.click(function() {
  383. _shock($('[zero-unique-container="' + opt.unique + '"]'));
  384. });
  385. }
  386. }
  387. }
  388. /**
  389. * 构建模态框
  390. * @param {[type]} opt [description]
  391. * @return {[type]} [description]
  392. */
  393. function _buildModal(opt) {
  394. _tmp_last_zindex++;
  395. //// 获取modal的宽度和高度
  396. var _width = opt.width.replace('px', '');
  397. var _height = opt.height.replace('px', '');
  398. var _wwidth = $(window).width();
  399. var _wheight = $(window).height();
  400. // 如果width为%值,则计算具体的width值
  401. if (_width.indexOf('%') !== -1) {
  402. _width = (_wwidth * parseInt(_width.replace('%', '')) / 100);
  403. }
  404. // 如果height为%值,则计算具体的height值
  405. if (_height.indexOf('%') !== -1) {
  406. _height = (_wheight * parseInt(_height.replace('%', '')) / 100);
  407. }
  408. if (typeof _width === 'string') _width = parseInt(_width);
  409. if (typeof _height === 'string') _height = parseInt(_height);
  410. //// 获取modal的位置
  411. var _left = (_wwidth - _width) / 2;
  412. var _top = $(window).scrollTop() + Math.ceil(($(window).height() - _height) / 3);
  413. //// 构建容器
  414. var _container = $('<div zero-unique-container="' + opt.unique + '" class="zeromodal-container" style="z-index:' + _tmp_last_zindex + ';width:' + _width + 'px;height:' + _height + 'px;left:' + _left + 'px;top:' + (opt.transition ? _top - 50 : _top) + 'px"></div>');
  415. //// 构建头部
  416. var _headerHtml = '<div zeromodal-unqiue-header="' + opt.unique + '" class="zeromodal-header">';
  417. _headerHtml += ' <div title="关闭" zero-close-unique="' + opt.unique + '" class="zeromodal-close">×</div>';
  418. if (opt.max) {
  419. _headerHtml += ' <div title="最大化/取消最大化" zero-max-unique="' + opt.unique + '" class="zeromodal-max"></div>';
  420. }
  421. _headerHtml += ' <span class="modal-title">' + opt.title + '</span>';
  422. _headerHtml += ' </div>';
  423. var _header = $(_headerHtml);
  424. _container.append(_header);
  425. $('body').append(_container);
  426. // 绑定关闭事件
  427. $('[zero-close-unique="' + opt.unique + '"]').click(function() {
  428. _close(_tmp_zemoModal_opt[$(this).attr('zero-close-unique')]);
  429. });
  430. // 绑定最大化事件
  431. $('[zero-max-unique="' + opt.unique + '"]').click(function() {
  432. if ($(this).attr('max') !== '1') {
  433. _resize(_tmp_zemoModal_opt[$(this).attr('zero-max-unique')], '90%', '85%');
  434. $(this).attr('max', '1');
  435. } else {
  436. _resize(_tmp_zemoModal_opt[$(this).attr('zero-max-unique')]);
  437. $(this).attr('max', '0');
  438. }
  439. _resizeBodyHeight(opt); // 重置body的高度
  440. });
  441. // 出场动画
  442. if (opt.transition) {
  443. $('.zeromodal-container').animate({ top: _top }, 300);
  444. }
  445. //// 构建内容区
  446. var _body = $('<div zero-unique-body="' + opt.unique + '" class="zeromodal-body"></div>');
  447. _container.append(_body);
  448. _resizeBodyHeight(opt); // 重置body的高度
  449. // 构建拖拽区
  450. if (opt.resize) {
  451. _container.append('<div zero-unique-sweep-tee="' + opt.unique + '" class="zeromodal-sweep-tee"></div>');
  452. _drag(opt.unique, opt); // 绑定拖拽事件
  453. }
  454. if (typeof opt.onLoad === 'function') { opt.onLoad(); }
  455. // 如果url为空,则直接显示content的内容
  456. if (!opt.url) {
  457. // 如果是div方式,则设置overflow-y属性,同时通过ajax获取内容
  458. $('[zero-unique-body="' + opt.unique + '"]').addClass('zeromodal-overflow-y');
  459. _body.html(opt.content);
  460. if (typeof opt.onComplete === 'function') {
  461. opt.onComplete();
  462. }
  463. } else {
  464. _body.html('<div class="zeromodal-loading1"></div>');
  465. // 如果iframe为true,则通过iframe的方式加载需要显示的内容
  466. if (opt.iframe) {
  467. var _iframe = $('<iframe src="' + opt.url + '" class="zeromodal-frame"></iframe>');
  468. _body.append(_iframe);
  469. _iframe.load(function() {
  470. $('.zeromodal-loading1').remove();
  471. if (typeof opt.onComplete === 'function') {
  472. opt.onComplete(); }
  473. });
  474. } else {
  475. // 如果是div方式,则设置overflow-y属性,同时通过ajax获取内容
  476. $('[zero-unique-body="' + opt.unique + '"]').addClass('zeromodal-overflow-y');
  477. $.ajax({
  478. url: opt.url,
  479. dataType: "html",
  480. type: "get",
  481. success: function(data) {
  482. _body.append(data);
  483. $('.zeromodal-loading1').remove();
  484. if (typeof opt.onComplete === 'function') {
  485. opt.onComplete(); }
  486. }
  487. });
  488. }
  489. }
  490. //// 构建尾部区
  491. _buildFooter(opt, _container);
  492. if (opt.esc) {
  493. $('body').one("keyup", function(e) {
  494. if (e.keyCode === 27) {
  495. _close(opt);
  496. }
  497. });
  498. }
  499. }
  500. /**
  501. * 构建尾部
  502. * @param {[type]} opt [description]
  503. * @param {[type]} _container [description]
  504. * @return {[type]} [description]
  505. */
  506. function _buildFooter(opt, _container) {
  507. if (opt.ok || opt.cancel || (opt.buttons !== undefined && opt.buttons.length > 0)) {
  508. var _footer = '<div class="zeromodal-footer">';
  509. _footer += opt.buttonTopLine ? '<div class="zeromodal-line"></div>' : '';
  510. _footer += ' <div zeromodal-btn-container="' + opt.unique + '" class="zeromodal-btn-container"></div>';
  511. _footer += ' </div>';
  512. _container.append(_footer);
  513. if (opt.buttons !== undefined && opt.buttons.length > 0) {
  514. // 显示自定义的按钮
  515. var _buttonHtml = '';
  516. for (var i = 0; i < opt.buttons.length; i++) {
  517. var b = opt.buttons[i];
  518. _buttonHtml += '<button class="' + (b.className || '') + '"' + (b.attr !== undefined ? ' ' + b.attr : '') + '>' + b.name + '</button>';
  519. }
  520. $('[zeromodal-btn-container="' + opt.unique + '"]').append(_buttonHtml);
  521. } else {
  522. // 显示默认提供的按钮
  523. if (opt.ok) {
  524. if(opt.okTitle==""){
  525. opt.okTitle=$(".head_okTitle").val();
  526. }
  527. var _ok = $('<button zeromodal-btn-ok="' + opt.unique + '" class="zeromodal-btn zeromodal-btn-primary">' + opt.okTitle + '</button>');
  528. $('[zeromodal-btn-container="' + opt.unique + '"]').append(_ok);
  529. _ok.click(function() {
  530. if (typeof opt.okFn === 'function') {
  531. var _r = opt.okFn();
  532. if (typeof _r === 'undefined' || _r) {
  533. _close(opt);
  534. }
  535. } else {
  536. _close(opt);
  537. }
  538. });
  539. }
  540. if (opt.cancel) {
  541. var _cancel = $('<button zeromodal-btn-cancel="' + opt.unique + '" class="zeromodal-btn zeromodal-btn-default">' + opt.cancelTitle + '</button>');
  542. $('[zeromodal-btn-container="' + opt.unique + '"]').append(_cancel);
  543. _cancel.click(function() {
  544. if (typeof opt.cancelFn === 'function') {
  545. var _r = opt.cancelFn();
  546. if (typeof _r === 'undefined' || _r) {
  547. _close(opt);
  548. }
  549. } else {
  550. _close(opt);
  551. }
  552. });
  553. }
  554. }
  555. }
  556. }
  557. /**
  558. * 构建提示框、确认框等内容
  559. */
  560. function _buildAlertInfo(opt) {
  561. // 初始化
  562. if (typeof opt === 'undefined' || typeof opt.cancelTitle === 'undefined') {
  563. //opt.cancelTitle = '取消';
  564. opt.cancelTitle=$(".head_cancelTitle").val();
  565. }
  566. var params = _initParams(opt);
  567. params.width = opt.width||'360px';
  568. params.height = opt.height||'300px';
  569. params.esc = true;
  570. params.ok = opt.ok!=null?opt.ok:true; //true
  571. params.buttonTopLine = false;
  572. if (typeof _okFn !== 'undefined') {
  573. params.okFn = _okFn;
  574. }
  575. if (typeof cancelFn !== 'undefined') {
  576. params.cancelFn = cancelFn;
  577. }
  578. var _content = params.content || '';
  579. var _contentDetail = params.contentDetail || '';
  580. params.content = '';
  581. // 渲染
  582. _render(params);
  583. // 渲染内容
  584. var icon;
  585. if (typeof params.iconDisplay !== 'undefined') {
  586. icon = $(params.iconDisplay);
  587. } else {
  588. icon = $('<div class="zeromodal-icon ' + params.iconClass + '">' + params.iconText + '</div>');
  589. }
  590. var text = $('<div class="zeromodal-title1">' + _content + '</div><div class="zeromodal-title2">' + _contentDetail + '</div>');
  591. $('[zero-unique-body="' + params.unique + '"]').append(icon);
  592. $('[zero-unique-body="' + params.unique + '"]').append(text);
  593. $('[zero-unique-body="' + params.unique + '"]').removeClass('zeromodal-overflow-y');
  594. // 给按钮添加focus
  595. $('[zeromodal-btn-ok="' + params.unique + '"]').focus();
  596. // 重新定位
  597. _tmp_variate_ishow = true;
  598. $(window).resize(function() {
  599. if (_tmp_variate_ishow) {
  600. _resize(params);
  601. }
  602. });
  603. }
  604. /**
  605. * 重新设置大小及位置
  606. * @param {[type]} opt [description]
  607. * @return {[type]} [description]
  608. */
  609. function _resize(opt, width, height) {
  610. // 遮罩层
  611. $('[zero-unique-overlay="' + opt.unique + '"]').css("width", $(document).width() + 'px').css("height", $(document).height() + 'px');
  612. // 弹出层
  613. var _wwidth = $(window).width();
  614. var _wheight = $(window).height();
  615. var _width = width !== undefined ? width.replace('px', '') : opt.width.replace('px', '');
  616. var _height = height !== undefined ? height.replace('px', '') : opt.height.replace('px', '');
  617. if (_width.indexOf('%') !== -1) {
  618. _width = (_wwidth * parseInt(_width.replace('%', '')) / 100);
  619. }
  620. if (_height.indexOf('%') !== -1) {
  621. _height = (_wheight * parseInt(_height.replace('%', '')) / 100);
  622. }
  623. if (typeof _width === 'string') _width = parseInt(_width);
  624. if (typeof _height === 'string') _height = parseInt(_height);
  625. var _left = (_wwidth - _width) / 2;
  626. var _top = $(window).scrollTop() + Math.ceil(($(window).height() - _height) / 3);
  627. $('[zero-unique-container="' + opt.unique + '"]').css('width', _width + 'px').css('height', _height + 'px').css('left', _left + 'px').css('top', _top + 'px');
  628. }
  629. /**
  630. * 重新设置位置
  631. * @param {[type]} opt [description]
  632. * @return {[type]} [description]
  633. */
  634. function _resizePostion(opt) {
  635. var _wwidth = $(window).width();
  636. var _wheight = $(window).height();
  637. var _width = parseInt($('[zero-unique-container="' + opt.unique + '"]').css('width').replace('px', ''));
  638. var _height = parseInt($('[zero-unique-container="' + opt.unique + '"]').css('height').replace('px', ''));
  639. var _left = (_wwidth - _width) / 2;
  640. var _top = $(window).scrollTop() + Math.ceil(($(window).height() - _height) / 3);
  641. $('[zero-unique-container="' + opt.unique + '"]').css('left', _left + 'px').css('top', _top + 'px');
  642. }
  643. /**
  644. * 重置设置body的高度
  645. * @param {[type]} opt [description]
  646. * @return {[type]} [description]
  647. */
  648. function _resizeBodyHeight(opt) {
  649. var headerHeight = $('[zeromodal-unqiue-header="' + opt.unique + '"]').height();
  650. var buttonHeight = (opt.ok || opt.cancel || (opt.buttons !== undefined && opt.buttons.length > 0)) ? 60 : 0;
  651. var height = $('[zero-unique-container="' + opt.unique + '"]').height() - headerHeight - 10 - buttonHeight;
  652. $('[zero-unique-body="' + opt.unique + '"]').css('height', height);
  653. }
  654. /**
  655. * 元素左右晃动
  656. * @param {[type]} jobj [description]
  657. * @return {[type]} [description]
  658. */
  659. function _shock(jobj) {
  660. if (jobj.length === 0) {
  661. return;
  662. }
  663. var left = jobj.position().left;
  664. for (var i = 0; i < 2; i++) {
  665. jobj.animate({ left: left - 2 }, 50);
  666. jobj.animate({ left: left }, 50);
  667. jobj.animate({ left: left + 2 }, 50);
  668. }
  669. jobj.animate({ left: left }, 50);
  670. }
  671. /**
  672. * 判断基本类型的值是否存在于数组中
  673. * @param {[type]} arr [description]
  674. * @param {[type]} r [description]
  675. * @return {Boolean} [description]
  676. */
  677. function _isIn(arr, r) {
  678. for (var i = 0; i < arr.length; i++) {
  679. if (arr[i] === r) {
  680. return true;
  681. }
  682. }
  683. return false;
  684. }
  685. /**
  686. * 获取uuid
  687. * @returns {string}
  688. */
  689. function _getUuid() {
  690. var s = [];
  691. var hexDigits = "0123456789abcdef";
  692. for (var i = 0; i < 36; i++) {
  693. s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
  694. }
  695. s[14] = "4";
  696. s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
  697. s[8] = s[13] = s[18] = s[23] = "";
  698. var uuid = s.join("");
  699. return uuid;
  700. }
  701. /**
  702. * 拖动改变大小(改变container、body)
  703. * @param {[type]} unique [description]
  704. * @param {[type]} opt [description]
  705. * @return {[type]} [description]
  706. */
  707. function _drag(unique, opt) {
  708. var timer;
  709. var mouse_x;
  710. var mouse_y;
  711. var moved = false;
  712. var item = $('[zero-unique-sweep-tee="' + unique + '"]')[0];
  713. var itemBody = $('[zero-unique-body="' + unique + '"]')[0];
  714. document.onmousemove = function(e) {
  715. if ($('[zero-unique-container="' + opt.unique + '"]').size() === 0) {
  716. return;
  717. }
  718. mouse_x = e.pageX;
  719. mouse_y = e.pageY;
  720. if (timer !== undefined) {
  721. moved = true;
  722. }
  723. };
  724. item.onmousedown = function() {
  725. // 禁用允许选中
  726. document.onselectstart = function() {
  727. return false;
  728. };
  729. // offsetTop以及offsetTop必须要放在mousedown里面,每次都要计算
  730. var margin_top = mouse_y - item.offsetTop;
  731. var margin_left = mouse_x - item.offsetLeft;
  732. timer = setInterval(function() {
  733. if (timer && moved) {
  734. var to_x = mouse_x - margin_left;
  735. var to_y = mouse_y - margin_top;
  736. $('.zeromodal-container').css('width', to_x + 3 + 'px').css('height', to_y + 3 + 'px');
  737. }
  738. }, 5);
  739. };
  740. document.onmouseup = function() {
  741. if ($('[zero-unique-container="' + opt.unique + '"]').size() === 0) {
  742. return;
  743. }
  744. // 启用允许选中
  745. document.onselectstart = function() {
  746. return true;
  747. };
  748. clearInterval(timer);
  749. timer = undefined;
  750. moved = false;
  751. // 重新定位
  752. _resizePostion(opt);
  753. // 重新设置body高度
  754. _resizeBodyHeight(opt);
  755. // 重置大小后触发的事件
  756. if (opt.resizeAfterFn !== undefined && typeof opt.resizeAfterFn === 'function') {
  757. opt.resizeAfterFn(opt);
  758. }
  759. };
  760. }
  761. return zeroModal;
  762. }(jQuery))));