source: pro-violet-viettel/www/deploy/20150304/assets/js/jquery/jquery.modal.js @ 804

Last change on this file since 804 was 780, checked in by dungnv, 10 years ago
File size: 6.5 KB
Line 
1/*
2    A simple jQuery modal (http://github.com/kylefox/jquery-modal)
3    Version 0.5.5
4*/
5(function($) {
6
7  var current = null;
8
9  $.modal = function(el, options) {
10    $.modal.close(); // Close any open modals.
11    var remove, target;
12    this.$body = $('body');
13    this.options = $.extend({}, $.modal.defaults, options);
14    this.options.doFade = !isNaN(parseInt(this.options.fadeDuration, 10));
15    if (el.is('a')) {
16      target = el.attr('href');
17      //Select element by id from href
18      alert ("1");
19      if (/^#/.test(target)) {
20        this.$elm = $(target);
21        if (this.$elm.length !== 1) return null;
22        this.open();
23      //AJAX
24      } else {
25        this.$elm = $('<div>');
26        this.$body.append(this.$elm);
27        remove = function(event, modal) { modal.elm.remove(); };
28        this.showSpinner();
29        el.trigger($.modal.AJAX_SEND);
30        $.get(target).done(function(html) {
31          if (!current) return;
32          el.trigger($.modal.AJAX_SUCCESS);
33          current.$elm.empty().append(html).on($.modal.CLOSE, remove);
34          current.hideSpinner();
35          current.open();
36          el.trigger($.modal.AJAX_COMPLETE);
37        }).fail(function() {
38          el.trigger($.modal.AJAX_FAIL);
39          current.hideSpinner();
40          el.trigger($.modal.AJAX_COMPLETE);
41        });
42      }
43    } else {
44      this.$elm = el;
45      this.open();
46    }
47  };
48
49  $.modal.prototype = {
50    constructor: $.modal,
51
52    open: function() {
53      var m = this;
54      if(this.options.doFade) {
55        this.block();
56        setTimeout(function() {
57          m.show();
58        }, this.options.fadeDuration * this.options.fadeDelay);
59      } else {
60        this.block();
61        this.show();
62      }
63      if (this.options.escapeClose) {
64        $(document).on('keydown.modal', function(event) {
65          if (event.which == 27) $.modal.close();
66        });
67      }
68      if (this.options.clickClose) this.blocker.click($.modal.close);
69    },
70
71    close: function() {
72      this.unblock();
73      this.hide();
74      $(document).off('keydown.modal');
75    },
76
77    block: function() {
78      var initialOpacity = this.options.doFade ? 0 : this.options.opacity;
79      this.$elm.trigger($.modal.BEFORE_BLOCK, [this._ctx()]);
80      this.blocker = $('<div class="jquery-modal blocker"></div>').css({
81        top: 0, right: 0, bottom: 0, left: 0,
82        width: "100%", height: "100%",
83        position: "fixed",
84        zIndex: this.options.zIndex,
85        background: this.options.overlay,
86        opacity: initialOpacity
87      });
88      this.$body.append(this.blocker);
89      if(this.options.doFade) {
90        this.blocker.animate({opacity: this.options.opacity}, this.options.fadeDuration);
91      }
92      this.$elm.trigger($.modal.BLOCK, [this._ctx()]);
93    },
94
95    unblock: function() {
96      if(this.options.doFade) {
97        this.blocker.fadeOut(this.options.fadeDuration, function() {
98          $(this).remove();
99        });
100      } else {
101        this.blocker.remove();
102      }
103    },
104
105    show: function() {
106      this.$elm.trigger($.modal.BEFORE_OPEN, [this._ctx()]);
107      if (this.options.showClose) {
108        this.closeButton = $('<a href="#close-modal" rel="modal:close" class="close-modal ' + this.options.closeClass + '">' + this.options.closeText + '</a>');
109        this.$elm.append(this.closeButton);
110      }
111      this.$elm.addClass(this.options.modalClass + ' current');
112      this.center();
113      if(this.options.doFade) {
114        this.$elm.fadeIn(this.options.fadeDuration);
115      } else {
116        this.$elm.show();
117      }
118      this.$elm.trigger($.modal.OPEN, [this._ctx()]);
119    },
120
121    hide: function() {
122      this.$elm.trigger($.modal.BEFORE_CLOSE, [this._ctx()]);
123      if (this.closeButton) this.closeButton.remove();
124      this.$elm.removeClass('current');
125
126      if(this.options.doFade) {
127        this.$elm.fadeOut(this.options.fadeDuration);
128      } else {
129        this.$elm.hide();
130      }
131      this.$elm.trigger($.modal.CLOSE, [this._ctx()]);
132    },
133
134    showSpinner: function() {
135      if (!this.options.showSpinner) return;
136      this.spinner = this.spinner || $('<div class="' + this.options.modalClass + '-spinner"></div>')
137        .append(this.options.spinnerHtml);
138      this.$body.append(this.spinner);
139      this.spinner.show();
140    },
141
142    hideSpinner: function() {
143      if (this.spinner) this.spinner.remove();
144    },
145
146    center: function() {
147      this.$elm.css({
148        position: 'fixed',
149        top: "50%",
150        left: "50%",
151        marginTop: - (this.$elm.outerHeight() / 2),
152        marginLeft: - (this.$elm.outerWidth() / 2),
153        zIndex: this.options.zIndex + 1
154      });
155    },
156
157    //Return context for custom events
158    _ctx: function() {
159      return { elm: this.$elm, blocker: this.blocker, options: this.options };
160    }
161  };
162
163  //resize is alias for center for now
164  $.modal.prototype.resize = $.modal.prototype.center;
165
166  $.modal.close = function(event) {
167    if (!current) return;
168    if (event) event.preventDefault();
169    current.close();
170    var that = current.$elm;
171    current = null;
172    return that;
173  };
174
175  $.modal.resize = function() {
176    if (!current) return;
177    current.resize();
178  };
179
180  // Returns if there currently is an active modal
181  $.modal.isActive = function () {
182    return current ? true : false;
183  }
184
185  $.modal.defaults = {
186    overlay: "#000",
187    opacity: 0.75,
188    zIndex: 1,
189    escapeClose: true,
190    clickClose: true,
191    closeText: 'Close',
192    closeClass: '',
193    modalClass: "modal",
194    spinnerHtml: null,
195    showSpinner: true,
196    showClose: true,
197    fadeDuration: null,   // Number of milliseconds the fade animation takes.
198    fadeDelay: 1.0        // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)
199  };
200
201  // Event constants
202  $.modal.BEFORE_BLOCK = 'modal:before-block';
203  $.modal.BLOCK = 'modal:block';
204  $.modal.BEFORE_OPEN = 'modal:before-open';
205  $.modal.OPEN = 'modal:open';
206  $.modal.BEFORE_CLOSE = 'modal:before-close';
207  $.modal.CLOSE = 'modal:close';
208  $.modal.AJAX_SEND = 'modal:ajax:send';
209  $.modal.AJAX_SUCCESS = 'modal:ajax:success';
210  $.modal.AJAX_FAIL = 'modal:ajax:fail';
211  $.modal.AJAX_COMPLETE = 'modal:ajax:complete';
212
213  $.fn.modal = function(options){
214    if (this.length === 1) {
215      current = new $.modal(this, options);
216    }
217    return this;
218  };
219
220  // Automatically bind links with rel="modal:close" to, well, close the modal.
221  $(document).on('click.modal', 'a[rel="modal:close"]', $.modal.close);
222  $(document).on('click.modal', 'a[rel="modal:open"]', function(event) {
223    event.preventDefault();
224    $(this).modal();
225  });
226})(jQuery);
Note: See TracBrowser for help on using the repository browser.