https://www.designhotel.com.tw/js/jquery-semanticwp-modal.js

1/*
2
3 jQuery SemanticWP Modal
4 Version: 1.0.0
5 Author: Sergey Predvoditelev ([email protected])
6 Company: SemanticWP (http://semanticwp.net/)
7
8 Docs & Examples: http://semanticwp.net/jquery/modal/
9
10 */
11(function($) {
12
13
14	var default_options = {
15
16		type: 'html', // ajax или html
17		content: '',
18		url: '',
19		ajax: {},
20		ajax_request: null,
21
22		closeOnEsc: true,
23		closeOnOverlayClick: false,
24
25		clone: false,
26
27		overlay: {
28			block: undefined,
29			tpl: '<div class="swpmodal-overlay"></div>',
30			css: {
31				background: '#000',
32				opacity: .9
33			}
34		},
35
36		container: {
37			block: undefined,
38			tpl: '<div class="swpmodal-container"><table class="swpmodal-container_i"><tr><td class="swpmodal-container_i2"></td></tr></table></div>'
39		},
40
41		wrap: undefined,
42		body: undefined,
43
44		errors: {
45			tpl: '<div class="swpmodal-error swpmodal-close"></div>',
46			autoclose_delay: 2000,
47			ajax_unsuccessful_load: 'Error'
48		},
49
50		openEffect: {
51			type: 'fade',
52			speed: 400
53		},
54		closeEffect: {
55			type: 'fade',
56			speed: 400
57		},
58
59		beforeOpen: $.noop,
60		afterOpen: $.noop,
61		beforeClose: $.noop,
62		afterClose: $.noop,
63		afterLoading: $.noop,
64		afterLoadingOnShow: $.noop,
65		errorLoading: $.noop
66
67	};
68
69
70	var modalID = 0;
71	var modals = $([]);
72
73
74	var utils = {
75
76
77		// Определяет произошло ли событие e вне блока block
78		isEventOut: function(blocks, e) {
79			var r = true;
80			$(blocks).each(function() {
81				if ($(e.target).get(0) == $(this).get(0)) r = false;
82				if ($(e.target).closest('HTML', $(this).get(0)).length == 0) r = false;
83			});
84			return r;
85		}
86
87
88	};
89
90
91	var modal = {
92
93
94		// Возвращает элемент, которым был вызван плагин
95		getParentEl: function(el) {
96			var r = $(el);
97			if (r.data('swpmodal')) return r;
98			r = $(el).closest('.swpmodal-container').data('swpmodalParentEl');
99			if (r) return r;
100			return false;
101		},
102
103
104		// Переход
105		transition: function(el, action, options, callback) {
106			callback = callback == undefined ? $.noop : callback;
107			switch (options.type) {
108				case 'fade':
109					action == 'show' ? el.fadeIn(options.speed, callback) : el.fadeOut(options.speed, callback);
110					break;
111				case 'none':
112					action == 'show' ? el.show() : el.hide();
113					callback();
114					break;
115			}
116		},
117
118
119		// Подготвка содержимого окна
120		prepare_body: function(D, $this) {
121
122			// Обработчик закрытия
123			$('.swpmodal-close', D.body).unbind('click.swpmodal').bind('click.swpmodal', function() {
124				$this.swpmodal('close');
125				return false;
126			});
127
128		},
129
130
131		// Инициализация элемента
132		init_el: function($this, options) {
133			var D = $this.data('swpmodal');
134			if (D) return;
135
136			D = options;
137			modalID++;
138			D.modalID = modalID;
139
140			// Overlay
141			D.overlay.block = $(D.overlay.tpl);
142			D.overlay.block.css(D.overlay.css);
143
144			// Container
145			D.container.block = $(D.container.tpl);
146
147			// BODY
148			D.body = $('.swpmodal-container_i2', D.container.block);
149			if (options.clone) {
150				D.body.html($this.clone(true));
151			} else {
152				$this.before('<div id="swpmodalReserve' + D.modalID + '" style="display: none" />');
153				D.body.html($this);
154			}
155
156			// Подготовка содержимого
157			modal.prepare_body(D, $this);
158
159			// Закрытие при клике на overlay
160			if (D.closeOnOverlayClick)
161				D.overlay.block.add(D.container.block).click(function(e) {
162					if (utils.isEventOut($('>*', D.body), e))
163						$this.swpmodal('close');
164				});
165
166			// Запомним настройки
167			D.container.block.data('swpmodalParentEl', $this);
168			$this.data('swpmodal', D);
169			modals = $.merge(modals, $this);
170
171			// Показать
172			$.proxy(actions.show, $this)();
173			if (D.type == 'html') return $this;
174
175			// Ajax-загрузка
176			if (D.ajax.beforeSend != undefined) {
177				var fn_beforeSend = D.ajax.beforeSend;
178				delete D.ajax.beforeSend;
179			}
180			if (D.ajax.success != undefined) {
181				var fn_success = D.ajax.success;
182				delete D.ajax.success;
183			}
184			if (D.ajax.error != undefined) {
185				var fn_error = D.ajax.error;
186				delete D.ajax.error;
187			}
188			var o = $.extend(true, {
189				url: D.url,
190				beforeSend: function() {
191					D.body.html('<div class="swpmodal-loading" />');
192					if (fn_beforeSend !== undefined)
193						fn_beforeSend(D, $this);
194				},
195				success: function(response) {
196
197					// Событие после загрузки до показа содержимого
198					$this.trigger('afterLoading');
199					response = D.afterLoading(D, $this, response) || response;
200
201					if (fn_success == undefined) {
202						D.body.html(response);
203					} else {
204						fn_success(D, $this, response);
205					}
206					modal.prepare_body(D, $this);
207
208					// Событие после загрузки после отображения содержимого

209					$this.trigger('afterLoadingOnShow');
210					D.afterLoadingOnShow(D, $this, response);
211
212				},
213				error: function() {
214
215					// Событие при ошибке загрузки
216					$this.trigger('errorLoading');
217					D.errorLoading(D, $this);
218
219					if (fn_error == undefined) {
220						D.body.html(D.errors.tpl);
221						$('.swpmodal-error', D.body).html(D.errors.ajax_unsuccessful_load);
222						$('.swpmodal-close', D.body).click(function() {
223							$this.swpmodal('close');
224							return false;
225						});
226						if (D.errors.autoclose_delay)
227							setTimeout(function() {
228								$this.swpmodal('close');
229							}, D.errors.autoclose_delay);
230					} else {
231						fn_error(D, $this);
232					}
233				}
234			}, D.ajax);
235			D.ajax_request = $.ajax(o);
236
237			// Запомнить настройки
238			$this.data('swpmodal', D);
239
240		},
241
242
243		// Инициализация
244		init: function(options) {
245			options = $.extend(true, {}, default_options, options);
246			if ($.isFunction(this)) {
247				if (options == undefined) {
248					$.error('jquery.swpmodal: Uncorrect parameters');
249					return;
250				}
251				if (options.type == '') {
252					$.error('jquery.swpmodal: Don\'t set parameter "type"');
253					return;
254				}
255				switch (options.type) {
256					case 'html':
257						if (options.content == '') {
258							$.error('jquery.swpmodal: Don\'t set parameter "content"');
259							return
260						}
261						var c = options.content;
262						options.content = '';
263
264						return modal.init_el($(c), options);
265						break;
266					case 'ajax':
267						if (options.url == '') {
268							$.error('jquery.swpmodal: Don\'t set parameter "url"');
269							return;
270						}
271						return modal.init_el($('<div />'), options);
272						break;
273				}
274			} else {
275				return this.each(function() {
276					modal.init_el($(this), $.extend(true, {}, options));
277				});
278			}
279		}
280
281
282	};
283
284
285	var actions = {
286
287
288		// Показать
289		show: function() {
290			var $this = modal.getParentEl(this);
291			if ($this === false) {
292				$.error('jquery.swpmodal: Uncorrect call');
293				return;
294			}
295			var D = $this.data('swpmodal');
296
297			// Добавить overlay и container
298			D.overlay.block.hide();
299			D.container.block.hide();
300			$('BODY').append(D.overlay.block);
301			$('BODY').append(D.container.block);
302
303			// Событие
304			D.beforeOpen(D, $this);
305			$this.trigger('beforeOpen');
306
307			// Wrap
308			if (D.wrap.css('overflow') != 'hidden') {
309				D.wrap.data('swpmodalOverflow', D.wrap.css('overflow'));
310				var w1 = D.wrap.outerWidth(true);
311				D.wrap.css('overflow', 'hidden');
312				var w2 = D.wrap.outerWidth(true);
313				if (w2 != w1)
314					D.wrap.css('marginRight', (w2 - w1) + 'px');
315			}
316
317			// Скрыть предыдущие оверлеи
318			modals.not($this).each(function() {
319				var d = $(this).data('swpmodal');
320				d.overlay.block.hide();
321			});
322
323			// Показать
324			modal.transition(D.overlay.block, 'show', modals.length > 1 ? {type: 'none'} : D.openEffect);
325			modal.transition(D.container.block, 'show', modals.length > 1 ? {type: 'none'} : D.openEffect, function() {
326				D.afterOpen(D, $this);
327				$this.trigger('afterOpen');
328			});
329
330			return $this;
331		},
332
333
334		// Закрыть
335		close: function() {
336			if ($.isFunction(this)) {
337				modals.each(function() {
338					$(this).swpmodal('close');
339				});
340			} else {
341				return this.each(function() {
342					var $this = modal.getParentEl(this);
343					if ($this === false) {
344						$.error('jquery.swpmodal: Uncorrect call');
345						return;
346					}
347					var D = $this.data('swpmodal');
348
349					// Событие перед закрытием
350					if (D.beforeClose(D, $this) === false) return;
351					$this.trigger('beforeClose');
352
353					// Показать предыдущие оверлеи
354					modals.not($this).last().each(function() {
355						var d = $(this).data('swpmodal');
356						d.overlay.block.show();
357					});
358
359					modal.transition(D.overlay.block, 'hide', modals.length > 1 ? {type: 'none'} : D.closeEffect);
360					modal.transition(D.container.block, 'hide', modals.length > 1 ? {type: 'none'} : D.closeEffect, function() {
361
362						// Событие после закрытия
363						D.afterClose(D, $this);
364						$this.trigger('afterClose');
365
366						// Если не клонировали - вернём на место
367						if (!D.clone)
368							$('#swpmodalReserve' + D.modalID).replaceWith(D.body.find('>*'));
369
370						D.overlay.block.remove();
371						D.container.block.remove();
372						$this.data('swpmodal', null);
373						if (!$('.swpmodal-container').length) {
374							if (D.wrap.data('swpmodalOverflow'))
375								D.wrap.css('overflow', D.wrap.data('swpmodalOverflow'));
376							D.wrap.css('marginRight', 0);
377						}
378
379					});

380
381					if (D.type == 'ajax')
382						D.ajax_request.abort();
383
384					modals = modals.not($this);
385				});
386			}
387		},
388
389
390		// Установить опции по-умолчанию
391		setDefault: function(options) {
392			$.extend(true, default_options, options);
393		}
394
395
396	};
397
398
399	$(function() {
400		default_options.wrap = $((document.all && !document.querySelector) ? 'html' : 'body');
401	});
402
403
404	// Закрытие при нажатии Escape
405	$(document).bind('keyup.swpmodal', function(e) {
406		var m = modals.last();
407		if (!m.length) return;
408		var D = m.data('swpmodal');
409		if (D.closeOnEsc && (e.keyCode === 27))
410			m.swpmodal('close');
411	});
412
413
414	$.swpmodal = $.fn.swpmodal = function(method) {
415
416		if (actions[method]) {
417			return actions[method].apply(this, Array.prototype.slice.call(arguments, 1));
418		} else if (typeof method === 'object' || !method) {
419			return modal.init.apply(this, arguments);
420		} else {
421			$.error('jquery.swpmodal: Method ' + method + ' does not exist');
422		}
423
424	};
425
426
427})(jQuery);