213 |
218 |
221 |
230 |
222 |
228 | Click Me
229 |
223 | $(document).ready(function() {
224 | $('.open-modal').quickModal();
225 | });
226 |
227 |
231 |
232 |
236 |
237 |
238 |
320 |
321 |
--------------------------------------------------------------------------------
/demo-2.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Hello, world!
233 |Jelly beans sweet roll wafer ice cream. Icing cake lemon drops pastry soufflé cheesecake. Fruitcake bear claw cotton candy chocolate cake. Apple pie sweet macaroon cake. Bonbon jelly-o chocolate bar bonbon pudding macaroon topping pastry. Tootsie roll cupcake pastry icing. Macaroon caramels muffin sugar plum topping dessert.
234 |Sweet topping donut liquorice brownie. Tart macaroon pastry pie fruitcake tootsie roll topping cookie. Cheesecake liquorice liquorice. Macaroon ice cream brownie muffin donut brownie soufflé powder.
235 |
213 |
218 |
222 |
241 |
223 |
239 | Click Me
240 |
224 | $(document).ready(function() {
225 | $('.open-modal').quickModal({
226 | animation: 'fade-left',
227 | speed: 1000,
228 | timing: 'ease-in-out',
229 | closeModalSelector: '.qm-close-modal',
230 | enableEsc: true,
231 | enableClickAway: false,
232 | appendBackgroundTo: 'body'
233 | onOpen: function() { alert('Hi!'); },
234 | onClose: function() { alert('Bye!'); }
235 | });
236 | });
237 |
238 |
242 |
243 |
247 |
248 |
249 |
341 |
342 |
--------------------------------------------------------------------------------
/demo-3.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Hello, world!
244 |Jelly beans sweet roll wafer ice cream. Icing cake lemon drops pastry soufflé cheesecake. Fruitcake bear claw cotton candy chocolate cake. Apple pie sweet macaroon cake. Bonbon jelly-o chocolate bar bonbon pudding macaroon topping pastry. Tootsie roll cupcake pastry icing. Macaroon caramels muffin sugar plum topping dessert.
245 |Sweet topping donut liquorice brownie. Tart macaroon pastry pie fruitcake tootsie roll topping cookie. Cheesecake liquorice liquorice. Macaroon ice cream brownie muffin donut brownie soufflé powder.
246 |
213 |
218 |
222 |
239 |
223 |
237 | Click Me
238 |
224 | $(document).ready(function() {
225 | $('.open-modal').click(function() {
226 | $('#my-modal').quickModal('open');
227 | return false;
228 | });
229 |
230 | $('#close-button').click(function() {
231 | $('#my-modal').quickModal('close');
232 | return false;
233 | });
234 | });
235 |
236 |
240 |
245 |
246 |
247 |
337 |
338 |
--------------------------------------------------------------------------------
/demo-4.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Hello, world!
241 |Jelly beans sweet roll wafer ice cream. Icing cake lemon drops pastry soufflé cheesecake. Fruitcake bear claw cotton candy chocolate cake. Apple pie sweet macaroon cake. Bonbon jelly-o chocolate bar bonbon pudding macaroon topping pastry. Tootsie roll cupcake pastry icing. Macaroon caramels muffin sugar plum topping dessert.
242 |Sweet topping donut liquorice brownie. Tart macaroon pastry pie fruitcake tootsie roll topping cookie. Cheesecake liquorice liquorice. Macaroon ice cream brownie muffin donut brownie soufflé powder.
243 | Close 244 |
213 |
218 |
221 |
254 |
255 |
256 |
355 |
356 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | var gulp = require('gulp');
2 | var cssnano = require('gulp-cssnano');
3 | var uglify = require('gulp-uglify');
4 | var insert = require('gulp-insert');
5 | var rename = require('gulp-rename');
6 | var runSequence = require('run-sequence');
7 | var sass = require('gulp-sass');
8 | var autoprefixer = require('gulp-autoprefixer');
9 | var header =
10 | `/* --------------------------------------------------
11 | jQuery Quick Modal v2.1.0
12 |
13 | By Kevin Beronilla
14 | http://www.kevinberonilla.com
15 |
16 | Fork on GitHub
17 | https://github.com/kevinberonilla/jquery-quick-modal
18 |
19 | Free to use under the MIT license
20 | http://www.opensource.org/licenses/mit-license.php
21 | -------------------------------------------------- */
22 | `;
23 |
24 | gulp.task('compile:sass', () => {
25 | return gulp.src(['./scss/*.scss'])
26 | .pipe(sass({ outputStyle: 'expanded' }).on('error', sass.logError))
27 | .pipe(autoprefixer())
28 | .pipe(gulp.dest('./css'));
29 | });
30 |
31 | gulp.task('minify:css', () => {
32 | return gulp.src(['./css/*.css', '!./css/*.min.css'])
33 | .pipe(cssnano())
34 | .pipe(rename({ suffix: '.min' }))
35 | .pipe(gulp.dest('./css'));
36 | });
37 |
38 | gulp.task('minify:js', () => {
39 | return gulp.src(['./js/*.js', '!./js/*.min.js'])
40 | .pipe(uglify())
41 | .pipe(rename({ suffix: '.min' }))
42 | .pipe(gulp.dest('./js'));
43 | });
44 |
45 | gulp.task('insert:comments:css', () => {
46 | return gulp.src(['./css/*.min.css'])
47 | .pipe(insert.prepend(header))
48 | .pipe(gulp.dest('./css'));
49 | });
50 |
51 | gulp.task('insert:comments:js', () => {
52 | return gulp.src(['./js/*.min.js'])
53 | .pipe(insert.prepend(header))
54 | .pipe(gulp.dest('./js'));
55 | });
56 |
57 | gulp.task('watch', () => {
58 | gulp.watch(['./scss/*.scss'], ['compile:sass']);
59 | gulp.watch(['./css/*.css', '!./css/*.min.css'], ['minify:css']);
60 | gulp.watch(['./js/*.js', '!./js/*.min.js'], ['minify:js']);
61 | gulp.watch(['./css/*.css'], ['insert:comments:css']);
62 | gulp.watch(['./js/*.min.js'], ['insert:comments:js']);
63 | });
64 |
65 | gulp.task('default', () => {
66 | return runSequence('compile:sass', 'minify:css', 'minify:js', 'insert:comments:css', 'insert:comments:js', 'watch');
67 | });
--------------------------------------------------------------------------------
/js/jquery.quick-modal.js:
--------------------------------------------------------------------------------
1 | /* --------------------------------------------------
2 | jQuery Quick Modal v2.1.0
3 |
4 | By Kevin Beronilla
5 | https://kevinberonilla.com
6 |
7 | Fork on GitHub
8 | https://github.com/kevinberonilla/jquery-quick-modal
9 |
10 | Free to use under the MIT license
11 | http://www.opensource.org/licenses/mit-license.php
12 | -------------------------------------------------- */
13 | (function($) { // Protect the $ alias (IIF)
14 | 'use strict';
15 |
16 | $.fn.setSpeed = function(speed) {
17 | return this.css({
18 | '-webkit-transition-duration': speed + 'ms',
19 | 'transition-duration': speed + 'ms'
20 | });
21 | }
22 |
23 | $.fn.setTiming = function(timing) {
24 | return this.css({
25 | '-webkit-transition-timing-function': timing,
26 | 'transition-timing-function': timing
27 | });
28 | }
29 |
30 | function checkSettings(modalObj, backgroundObj, settings) {
31 | modalObj.setSpeed(null)
32 | .setTiming(null);
33 | backgroundObj.setSpeed(null)
34 | .setTiming(null);
35 |
36 | if (settings.speed != 250 || settings.timing != 'ease') { // Set CSS if settings not equal to default
37 | modalObj.setSpeed(settings.speed)
38 | .setTiming(settings.timing);
39 | backgroundObj.setSpeed(settings.speed)
40 | .setTiming(settings.timing);
41 | }
42 | }
43 |
44 | $.fn.quickModal = function(args, options) {
45 | if (args !== null && typeof args === 'string') { // If calling a method
46 | var settings = $.extend({ // Extend the default settings established below
47 | animation: 'fade-zoom',
48 | speed: 250,
49 | timing: 'ease',
50 | closeModalSelector: '.qm-close-modal',
51 | enableEsc: true,
52 | enableClickAway: true,
53 | enableBodyScroll: false,
54 | appendBackgroundTo: 'body',
55 | prefix: 'qm',
56 | onOpen: function() {},
57 | onClose: function() {}
58 | }, options),
59 | bodyTag = $('body'),
60 | closeModalLink = $(settings.closeModalSelector),
61 | modal = $('.' + settings.prefix + '-modal'),
62 | self = this;
63 |
64 | function keyUpCheck(e) {
65 | if (e.keyCode == 27 && modal.is(':visible') && settings.enableEsc) closeModal(); // Esc key events based on options
66 | }
67 |
68 | function closeModal() {
69 | self.quickModal('close', settings);
70 | bodyTag.unbind('keyup', keyUpCheck);
71 | closeModalLink.unbind('click');
72 | $('#' + settings.prefix + '-modal-background').unbind('click');
73 | }
74 |
75 | if (!$('#modal-background').length) $(settings.appendBackgroundTo).append(''); // Append background; do not append if background already exists
76 |
77 | checkSettings(self, $('#' + settings.prefix + '-modal-background'), settings);
78 | modal.removeClass()
79 | .addClass(settings.prefix + '-modal')
80 | .addClass(settings.prefix + '-animation-' + settings.animation);
81 |
82 | switch (args) {
83 | case 'open':
84 | if (!settings.enableBodyScroll) bodyTag.addClass(settings.prefix + '-disable-scroll');
85 |
86 | modal.hide(); // Hide any currently visible modals
87 | self.show();
88 | bodyTag.keyup(keyUpCheck);
89 | $('#' + settings.prefix + '-modal-background').show();
90 |
91 | setTimeout(function() { // Ensure elements are displayed before adding classes
92 | if (settings.enableClickAway) $('#' + settings.prefix + '-modal-background').click(closeModal);
93 | $('#' + settings.prefix + '-modal-background').addClass(settings.prefix + '-visible');
94 | self.addClass(settings.prefix + '-visible');
95 | self.trigger('modalopen.qm'); // Trigger custom 'open' event
96 | settings.onOpen.call(); // Open callback
97 | }, 25);
98 |
99 | closeModalLink.click(function(e) { // Bind events based on options
100 | e.preventDefault();
101 | closeModal();
102 | });
103 |
104 | break;
105 |
106 | case 'close':
107 | bodyTag.removeClass(settings.prefix + '-disable-scroll');
108 | $('#' + settings.prefix + '-modal-background').removeClass(settings.prefix + '-visible');
109 | self.removeClass(settings.prefix + '-visible');
110 | settings.onClose.call(); // Close callback
111 |
112 | setTimeout(function() {
113 | $('#' + settings.prefix + '-modal-background').hide();
114 | self.hide();
115 | self.trigger('modalclose.qm'); // Trigger custom 'close' event
116 | }, settings.speed);
117 |
118 | break;
119 |
120 | case 'trigger':
121 | var modalId = self.data('modal-id'),
122 | targetModal = $('#' + modalId);
123 |
124 | targetModal.quickModal('open', settings);
125 |
126 | break;
127 |
128 | default:
129 | console.warn('The method you entered does not exist.');
130 | }
131 | } else { // If initializing plugin with options
132 | var self = this;
133 |
134 | self.click(function(e) {
135 | e.preventDefault();
136 |
137 | var modalId = $(this).data('modal-id'),
138 | targetModal = $('#' + modalId);
139 |
140 | if (modalId === undefined) console.warn('No "data-modal-id" attribute has been set.');
141 | else targetModal.quickModal('open', args);
142 | });
143 | }
144 |
145 | return this; // Return the object to enable chaining
146 | }
147 | }(jQuery));
148 |
--------------------------------------------------------------------------------
/js/jquery.quick-modal.min.js:
--------------------------------------------------------------------------------
1 | /* --------------------------------------------------
2 | jQuery Quick Modal v2.1.0
3 |
4 | By Kevin Beronilla
5 | https://kevinberonilla.com
6 |
7 | Fork on GitHub
8 | https://github.com/kevinberonilla/jquery-quick-modal
9 |
10 | Free to use under the MIT license
11 | http://www.opensource.org/licenses/mit-license.php
12 | -------------------------------------------------- */
13 | !function(e){"use strict";function i(e,i,n){e.setSpeed(null).setTiming(null),i.setSpeed(null).setTiming(null),250==n.speed&&"ease"==n.timing||(e.setSpeed(n.speed).setTiming(n.timing),i.setSpeed(n.speed).setTiming(n.timing))}e.fn.setSpeed=function(e){return this.css({"-webkit-transition-duration":e+"ms","transition-duration":e+"ms"})},e.fn.setTiming=function(e){return this.css({"-webkit-transition-timing-function":e,"transition-timing-function":e})},e.fn.quickModal=function(n,o){if(null!==n&&"string"==typeof n){var a=e.extend({animation:"fade-zoom",speed:250,timing:"ease",closeModalSelector:".qm-close-modal",enableEsc:!0,enableClickAway:!0,enableBodyScroll:!1,appendBackgroundTo:"body",prefix:"qm",onOpen:function(){},onClose:function(){}},o),l=e("body"),s=e(a.closeModalSelector),d=e("."+a.prefix+"-modal"),t=this;function r(e){27==e.keyCode&&d.is(":visible")&&a.enableEsc&&c()}function c(){t.quickModal("close",a),l.unbind("keyup",r),s.unbind("click"),e("#"+a.prefix+"-modal-background").unbind("click")}switch(e("#modal-background").length||e(a.appendBackgroundTo).append(''),i(t,e("#"+a.prefix+"-modal-background"),a),d.removeClass().addClass(a.prefix+"-modal").addClass(a.prefix+"-animation-"+a.animation),n){case"open":a.enableBodyScroll||l.addClass(a.prefix+"-disable-scroll"),d.hide(),t.show(),l.keyup(r),e("#"+a.prefix+"-modal-background").show(),setTimeout(function(){a.enableClickAway&&e("#"+a.prefix+"-modal-background").click(c),e("#"+a.prefix+"-modal-background").addClass(a.prefix+"-visible"),t.addClass(a.prefix+"-visible"),t.trigger("modalopen.qm"),a.onOpen.call()},25),s.click(function(e){e.preventDefault(),c()});break;case"close":l.removeClass(a.prefix+"-disable-scroll"),e("#"+a.prefix+"-modal-background").removeClass(a.prefix+"-visible"),t.removeClass(a.prefix+"-visible"),a.onClose.call(),setTimeout(function(){e("#"+a.prefix+"-modal-background").hide(),t.hide(),t.trigger("modalclose.qm")},a.speed);break;case"trigger":var u=t.data("modal-id");e("#"+u).quickModal("open",a);break;default:console.warn("The method you entered does not exist.")}}else(t=this).click(function(i){i.preventDefault();var o=e(this).data("modal-id"),a=e("#"+o);void 0===o?console.warn('No "data-modal-id" attribute has been set.'):a.quickModal("open",n)});return this}}(jQuery);
14 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "jquery-quick-modal",
3 | "version": "2.1.0",
4 | "description": "Easily add customizable, CSS-driven modal windows to your website",
5 | "repository": "https://kevinberonilla@github.com/kevinberonilla/jquery-quick-modal.git",
6 | "author": "Kevin Beronilla
222 |
245 | Click Me
246 |
247 |
223 | $(document).ready(function() {
224 | $('.open-modal').click(function() {
225 | $('#my-modal').quickModal('open', {
226 | animation: 'fade-down',
227 | speed: 250,
228 | timing: 'ease-in',
229 | enableClickAway: true,
230 | appendBackgroundTo: 'body .content'
231 | });
232 | return false;
233 | });
234 |
235 | $('#close-button').click(function() {
236 | $('#my-modal').quickModal('close', {
237 | speed: 1250,
238 | timing: 'linear'
239 | });
240 | return false;
241 | });
242 | });
243 |
244 |
248 |
253 | Hello, world!
249 |Jelly beans sweet roll wafer ice cream. Icing cake lemon drops pastry soufflé cheesecake. Fruitcake bear claw cotton candy chocolate cake. Apple pie sweet macaroon cake. Bonbon jelly-o chocolate bar bonbon pudding macaroon topping pastry. Tootsie roll cupcake pastry icing. Macaroon caramels muffin sugar plum topping dessert.
250 |Sweet topping donut liquorice brownie. Tart macaroon pastry pie fruitcake tootsie roll topping cookie. Cheesecake liquorice liquorice. Macaroon ice cream brownie muffin donut brownie soufflé powder.
251 | Close 252 |