https://yes-news.com/js/jquery.modal.js

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