A simple & lightweight method of displaying modal windows with jQuery.
\nFor quick examples and demos, head to jquerymodal.com.
\nMost plugins I've found try to do too much, and have specialized ways of handling photo galleries, iframes and video. The resulting HTML & CSS is often bloated and difficult to customize.
\nBy contrast, this plugin handles the two most common scenarios I run into
\nand does so with as little HTML & CSS as possible.
\nYou can install jquery-modal with npm:
\nnpm install jquery-modal
or with Bower:
\nbower install jquery-modal
or use the hosted version from cdnjs:
\n<!-- Remember to include jQuery :) -->\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>\n\n<!-- jQuery Modal -->\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.0/jquery.modal.min.js"></script>\n<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.0/jquery.modal.min.css" />
Using Rails? Check out the jquery-modal-rails plugin!
\njQuery Requirements: As of version 0.3.0, jQuery 1.7 is required. If you're using an earlier version of jQuery you can use the v.0.2.5 tag.
\nNaming conflict with Bootstrap: Bootstrap's modal uses the same $.modal namespace. If you want to use jquery-modal with Bootstrap, the simplest solution is to manually modify the name of this plugin.
The simplest approach is to add rel="modal:open" to your links and use the href attribute to specify what to open in the modal.
Open an existing DOM element by ID:
\n<form id="login-form" class="modal">\n ...\n</form>\n\n<a href="#login-form" rel="modal:open">Login</a>
Load a remote URL with AJAX:
\n<a href="login.html" rel="modal:open">Login</a>
You can manually open a modal by calling the .modal() method on the element:
<form id="login-form" class="modal">\n ...\n</form>
$('#login-form').modal();You can also invoke .modal() directly on links:
<a href="#ex5" data-modal>Open a DOM element</a>\n<a href="ajax.html" data-modal>Open an AJAX modal</a>
$('a[data-modal]').click(function(event) {\n $(this).modal();\n return false;\n});
You can provide a clean fallback for users who have JavaScript disabled by manually attaching the modal via the data-modal attribute. This allows you to write your links pointing to the href as normal (fallback) while enabling modals where JavaScript is enabled.
<!-- By default link takes user to /login.html -->\n<a href="/login.html" data-modal="#login-modal">Login</a>\n\n<!-- Login modal embedded in page -->\n<div id="login-modal" class="modal">\n ...\n</div>\n\n<!-- For browsers with JavaScript, open the modal. -->\n<script>\n $(function() {\n $('a[data-modal]').on('click', function() {\n $($(this).data('modal')).modal();\n return false;\n });\n });\n</script>
By default the overlay & window appear instantaneously, but you can enable a fade effect by specifying the fadeDuration option.
$('a.open-modal').click(function(event) {\n $(this).modal({\n fadeDuration: 250\n });\n return false;\n});
This will fade in the overlay and modal over 250 milliseconds simultaneously. If you want the effect of the overlay appearing before the window, you can specify the fadeDelay option. This indicates at what point during the overlay transition the window transition should begin.
So if you wanted the window to fade in when the overlay's was 80% finished:
\n$(elm).modal({\n fadeDuration: 250,\n fadeDelay: 0.80\n});Or, if you wanted the window to fade in a few moments after the overlay transition has completely finished:
\n$(elm).modal({\n fadeDuration: 250,\n fadeDelay: 1.5\n});The fadeDelay option only applies when opening the modal. When closing the modal, both the modal and the overlay fade out simultaneously according to the fadeDuration setting.
Fading is the only supported transition.
\nBecause there can be only one modal active at a single time, there's no need to select which modal to close:
\n$.modal.close();
Similar to how links can be automatically bound to open modals, they can be bound to close modals using rel="modal:close":
<a href="#close" rel="modal:close">Close window</a>
(Note that modals loaded with AJAX are removed from the DOM when closed).
\n$.modal.isActive() to check if a modal is currently being displayed.$.modal.getCurrent() to retrieve a reference to the currently active modal instance, if any.These are the supported options and their default values:
\n$.modal.defaults = {\n closeExisting: true, // Close existing modals. Set this to false if you need to stack multiple modal instances.\n escapeClose: true, // Allows the user to close the modal by pressing `ESC`\n clickClose: true, // Allows the user to close the modal by clicking the overlay\n closeText: 'Close', // Text content for the close <a> tag.\n closeClass: '', // Add additional class(es) to the close <a> tag.\n showClose: true, // Shows a (X) icon/link in the top-right corner\n modalClass: "modal", // CSS class added to the element being displayed in the modal.\n blockerClass: "modal", // CSS class added to the overlay (blocker).\n\n // HTML appended to the default spinner during AJAX requests.\n spinnerHtml: '<div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div>',\n\n showSpinner: true, // Enable/disable the default spinner during AJAX requests.\n fadeDuration: null, // Number of milliseconds the fade transition takes (null means no transition)\n fadeDelay: 1.0 // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)\n};The following events are triggered on the modal element at various points in the open/close cycle (see below for AJAX events).
\n$.modal.BEFORE_BLOCK = 'modal:before-block'; // Fires just before the overlay (blocker) appears.\n$.modal.BLOCK = 'modal:block'; // Fires after the overlay (block) is visible.\n$.modal.BEFORE_OPEN = 'modal:before-open'; // Fires just before the modal opens.\n$.modal.OPEN = 'modal:open'; // Fires after the modal has finished opening.\n$.modal.BEFORE_CLOSE = 'modal:before-close'; // Fires when the modal has been requested to close.\n$.modal.CLOSE = 'modal:close'; // Fires when the modal begins closing (including animations).\n$.modal.AFTER_CLOSE = 'modal:after-close'; // Fires after the modal has fully closed (including animations).
The first and only argument passed to these event handlers is the modal object, which has three properties:
modal.$elm; // Original jQuery object upon which modal() was invoked.\nmodal.options; // Options passed to the modal.\nmodal.$blocker; // The overlay element.
So, you could do something like this:
\n$('#purchase-form').on($.modal.BEFORE_CLOSE, function(event, modal) {\n clear_shopping_cart();\n});
jQuery Modal uses $.get for basic AJAX support. A simple spinner will be displayed by default (if you've included modal.css) and will have the class modal-spinner. If you've set the modalClass option, the spinner will be prefixed with that class name instead.
You can add text or additional HTML to the spinner with the spinnerHtml option, or disable the spinner entirely by setting showSpinner: false.
The default spinner is from the excellent SpinKit by Tobias Ahlin 👍
\nThe following events are triggered when AJAX modals are requested.
\n$.modal.AJAX_SEND = 'modal:ajax:send';\n$.modal.AJAX_SUCCESS = 'modal:ajax:success';\n$.modal.AJAX_FAIL = 'modal:ajax:fail';\n$.modal.AJAX_COMPLETE = 'modal:ajax:complete';
The handlers receive no arguments. The events are triggered on the <a> element which initiated the AJAX modal.
It's a good idea to provide more robust AJAX handling -- error handling, in particular. Instead of accommodating the myriad $.ajax options jQuery provides, jquery-modal makes it possible to directly modify the AJAX request itself.
Simply bypass the default AJAX handling (i.e.: don't use rel="modal")
<a href="ajax.html" rel="ajax:modal">Click me!</a>
and make your AJAX request in the link's click handler. Note that you need to manually append the new HTML/modal in the success callback:
$('a[rel="ajax:modal"]').click(function(event) {\n\n $.ajax({\n\n url: $(this).attr('href'),\n\n success: function(newHTML, textStatus, jqXHR) {\n $(newHTML).appendTo('body').modal();\n },\n\n error: function(jqXHR, textStatus, errorThrown) {\n // Handle AJAX errors\n }\n\n // More AJAX customization goes here.\n\n });\n\n return false;\n});
Note that the AJAX response must be wrapped in a div with class modal when using the second (manual) method.
Just kidding. Please create an issue and include a publicly-accessible demonstration of the bug. Dropbox or JSFiddle work well for demonstrating reproducable bugs, but you can use anything as long as it's publicly accessible. Your issue is much more likely to be resolved/merged if it includes a fix & pull request.
\nHave an idea that improves jquery-modal? Awesome! Please fork this repository, implement your idea (including documentation, if necessary), and submit a pull request.
\nI don't use this library as frequently as I used to, so if you want to see a fix/improvement you're best off submitting a pull request. Bugs without a test case and/or improvements without a pull request will be shown no mercy and closed!
\n![](\"https://img.shields.io/badge/maintainers-wanted-red.svg\"){kind=icon}
This library became more popular and active than I ever expected, and unfortunately I don't have time to maintain it myself.
\nIf you are interested in helping me maintain this library, please let me know — I would love your help!
\nRead more about becoming a maintainer »
\nI'd especially like people who would be excited about working towards a brand new jQuery Modal 2.0. See my Proposal for jQuery Modal 2.0 for more details & discussion.
\nI welcome improvements to this plugin, particularly with:
\nPlease fork and send pull requests, or create an issue. Keep in mind the spirit of this plugin is minimalism so I'm very picky about adding new features.
\nnpm installjquery.modal.js and/or jquery.modal.css, you can optionally regenerate the minified files with gulp min and gulp css respectively.README.md and/or examples/index.html) if necessary. Pull requests without documentation updates will be rejected.gulp changelog when cutting a new release.Please post a question on StackOverflow. Commercial support by email is also available — please contact kylefox@gmail.com for rates. Unfortunately I am unable to provide free email support.
\njQuery Modal is distributed under the MIT License:
\nCopyright (c) 2012 Kyle Fox\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n"Software"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE." + "html": "
A simple & lightweight method of displaying modal windows with jQuery.
\nFor quick examples and demos, head to jquerymodal.com.
\nMost plugins I've found try to do too much, and have specialized ways of handling photo galleries, iframes and video. The resulting HTML & CSS is often bloated and difficult to customize.
\nBy contrast, this plugin handles the two most common scenarios I run into
\nand does so with as little HTML & CSS as possible.
\nYou can install jquery-modal with npm:
\nnpm install jquery-modal
or with Bower:
\nbower install jquery-modal
or use the hosted version from cdnjs:
\n<!-- Remember to include jQuery :) -->\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>\n\n<!-- jQuery Modal -->\n<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>\n<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
Using Rails? Check out the jquery-modal-rails plugin!
\njQuery Requirements: As of version 0.3.0, jQuery 1.7 is required. If you're using an earlier version of jQuery you can use the v.0.2.5 tag.
\nNaming conflict with Bootstrap: Bootstrap's modal uses the same $.modal namespace. If you want to use jquery-modal with Bootstrap, the simplest solution is to manually modify the name of this plugin.
The simplest approach is to add rel="modal:open" to your links and use the href attribute to specify what to open in the modal.
Open an existing DOM element by ID:
\n<form id="login-form" class="modal">\n ...\n</form>\n\n<a href="#login-form" rel="modal:open">Login</a>
Load a remote URL with AJAX:
\n<a href="login.html" rel="modal:open">Login</a>
You can manually open a modal by calling the .modal() method on the element:
<form id="login-form" class="modal">\n ...\n</form>
$('#login-form').modal();You can also invoke .modal() directly on links:
<a href="#ex5" data-modal>Open a DOM element</a>\n<a href="ajax.html" data-modal>Open an AJAX modal</a>
$('a[data-modal]').click(function(event) {\n $(this).modal();\n return false;\n});
You can provide a clean fallback for users who have JavaScript disabled by manually attaching the modal via the data-modal attribute. This allows you to write your links pointing to the href as normal (fallback) while enabling modals where JavaScript is enabled.
<!-- By default link takes user to /login.html -->\n<a href="/login.html" data-modal="#login-modal">Login</a>\n\n<!-- Login modal embedded in page -->\n<div id="login-modal" class="modal">\n ...\n</div>\n\n<!-- For browsers with JavaScript, open the modal. -->\n<script>\n $(function() {\n $('a[data-modal]').on('click', function() {\n $($(this).data('modal')).modal();\n return false;\n });\n });\n</script>
By default the overlay & window appear instantaneously, but you can enable a fade effect by specifying the fadeDuration option.
$('a.open-modal').click(function(event) {\n $(this).modal({\n fadeDuration: 250\n });\n return false;\n});
This will fade in the overlay and modal over 250 milliseconds simultaneously. If you want the effect of the overlay appearing before the window, you can specify the fadeDelay option. This indicates at what point during the overlay transition the window transition should begin.
So if you wanted the window to fade in when the overlay's was 80% finished:
\n$(elm).modal({\n fadeDuration: 250,\n fadeDelay: 0.80\n});Or, if you wanted the window to fade in a few moments after the overlay transition has completely finished:
\n$(elm).modal({\n fadeDuration: 250,\n fadeDelay: 1.5\n});The fadeDelay option only applies when opening the modal. When closing the modal, both the modal and the overlay fade out simultaneously according to the fadeDuration setting.
Fading is the only supported transition.
\nBecause there can be only one modal active at a single time, there's no need to select which modal to close:
\n$.modal.close();
Similar to how links can be automatically bound to open modals, they can be bound to close modals using rel="modal:close":
<a href="#close" rel="modal:close">Close window</a>
(Note that modals loaded with AJAX are removed from the DOM when closed).
\n$.modal.isActive() to check if a modal is currently being displayed.$.modal.getCurrent() to retrieve a reference to the currently active modal instance, if any.These are the supported options and their default values:
\n$.modal.defaults = {\n closeExisting: true, // Close existing modals. Set this to false if you need to stack multiple modal instances.\n escapeClose: true, // Allows the user to close the modal by pressing `ESC`\n clickClose: true, // Allows the user to close the modal by clicking the overlay\n closeText: 'Close', // Text content for the close <a> tag.\n closeClass: '', // Add additional class(es) to the close <a> tag.\n showClose: true, // Shows a (X) icon/link in the top-right corner\n modalClass: "modal", // CSS class added to the element being displayed in the modal.\n blockerClass: "modal", // CSS class added to the overlay (blocker).\n\n // HTML appended to the default spinner during AJAX requests.\n spinnerHtml: '<div class="rect1"></div><div class="rect2"></div><div class="rect3"></div><div class="rect4"></div>',\n\n showSpinner: true, // Enable/disable the default spinner during AJAX requests.\n fadeDuration: null, // Number of milliseconds the fade transition takes (null means no transition)\n fadeDelay: 1.0 // Point during the overlay's fade-in that the modal begins to fade in (.5 = 50%, 1.5 = 150%, etc.)\n};The following events are triggered on the modal element at various points in the open/close cycle (see below for AJAX events).
\n$.modal.BEFORE_BLOCK = 'modal:before-block'; // Fires just before the overlay (blocker) appears.\n$.modal.BLOCK = 'modal:block'; // Fires after the overlay (block) is visible.\n$.modal.BEFORE_OPEN = 'modal:before-open'; // Fires just before the modal opens.\n$.modal.OPEN = 'modal:open'; // Fires after the modal has finished opening.\n$.modal.BEFORE_CLOSE = 'modal:before-close'; // Fires when the modal has been requested to close.\n$.modal.CLOSE = 'modal:close'; // Fires when the modal begins closing (including animations).\n$.modal.AFTER_CLOSE = 'modal:after-close'; // Fires after the modal has fully closed (including animations).
The first and only argument passed to these event handlers is the modal object, which has three properties:
modal.$elm; // Original jQuery object upon which modal() was invoked.\nmodal.options; // Options passed to the modal.\nmodal.$blocker; // The overlay element.
So, you could do something like this:
\n$('#purchase-form').on($.modal.BEFORE_CLOSE, function(event, modal) {\n clear_shopping_cart();\n});
jQuery Modal uses $.get for basic AJAX support. A simple spinner will be displayed by default (if you've included modal.css) and will have the class modal-spinner. If you've set the modalClass option, the spinner will be prefixed with that class name instead.
You can add text or additional HTML to the spinner with the spinnerHtml option, or disable the spinner entirely by setting showSpinner: false.
The default spinner is from the excellent SpinKit by Tobias Ahlin 👍
\nThe following events are triggered when AJAX modals are requested.
\n$.modal.AJAX_SEND = 'modal:ajax:send';\n$.modal.AJAX_SUCCESS = 'modal:ajax:success';\n$.modal.AJAX_FAIL = 'modal:ajax:fail';\n$.modal.AJAX_COMPLETE = 'modal:ajax:complete';
The handlers receive no arguments. The events are triggered on the <a> element which initiated the AJAX modal.
It's a good idea to provide more robust AJAX handling -- error handling, in particular. Instead of accommodating the myriad $.ajax options jQuery provides, jquery-modal makes it possible to directly modify the AJAX request itself.
Simply bypass the default AJAX handling (i.e.: don't use rel="modal")
<a href="ajax.html" rel="ajax:modal">Click me!</a>
and make your AJAX request in the link's click handler. Note that you need to manually append the new HTML/modal in the success callback:
$('a[rel="ajax:modal"]').click(function(event) {\n\n $.ajax({\n\n url: $(this).attr('href'),\n\n success: function(newHTML, textStatus, jqXHR) {\n $(newHTML).appendTo('body').modal();\n },\n\n error: function(jqXHR, textStatus, errorThrown) {\n // Handle AJAX errors\n }\n\n // More AJAX customization goes here.\n\n });\n\n return false;\n});
Note that the AJAX response must be wrapped in a div with class modal when using the second (manual) method.
Just kidding. Please create an issue and include a publicly-accessible demonstration of the bug. Dropbox or JSFiddle work well for demonstrating reproducable bugs, but you can use anything as long as it's publicly accessible. Your issue is much more likely to be resolved/merged if it includes a fix & pull request.
\nHave an idea that improves jquery-modal? Awesome! Please fork this repository, implement your idea (including documentation, if necessary), and submit a pull request.
\nI don't use this library as frequently as I used to, so if you want to see a fix/improvement you're best off submitting a pull request. Bugs without a test case and/or improvements without a pull request will be shown no mercy and closed!
\n
This library became more popular and active than I ever expected, and unfortunately I don't have time to maintain it myself.
\nIf you are interested in helping me maintain this library, please let me know — I would love your help!
\nRead more about becoming a maintainer »
\nI'd especially like people who would be excited about working towards a brand new jQuery Modal 2.0. See my Proposal for jQuery Modal 2.0 for more details & discussion.
\nI welcome improvements to this plugin, particularly with:
\nPlease fork and send pull requests, or create an issue. Keep in mind the spirit of this plugin is minimalism so I'm very picky about adding new features.
\nnpm installjquery.modal.js and/or jquery.modal.css, you can optionally regenerate the minified files with gulp min and gulp css respectively.README.md and/or examples/index.html) if necessary. Pull requests without documentation updates will be rejected.gulp changelog when cutting a new release.Please post a question on StackOverflow. Commercial support by email is also available — please contact kylefox@gmail.com for rates. Unfortunately I am unable to provide free email support.
\njQuery Modal is distributed under the MIT License:
\nCopyright (c) 2012 Kyle Fox\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of this software and associated documentation files (the\n"Software"), to deal in the Software without restriction, including\nwithout limitation the rights to use, copy, modify, merge, publish,\ndistribute, sublicense, and/or sell copies of the Software, and to\npermit persons to whom the Software is furnished to do so, subject to\nthe following conditions:\n\nThe above copyright notice and this permission notice shall be\nincluded in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,\nEXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF\nMERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND\nNONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE\nLIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION\nOF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION\nWITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE." }, { "component": "footer", diff --git a/examples/index.html b/examples/index.html index 8c82acb..ae9bef0 100644 --- a/examples/index.html +++ b/examples/index.html @@ -198,8 +198,8 @@
Refer to the README for more installation options.
diff --git a/jquery.modal.js b/jquery.modal.js index 96fafaf..02c522d 100644 --- a/jquery.modal.js +++ b/jquery.modal.js @@ -1,6 +1,6 @@ /* A simple jQuery modal (http://github.com/kylefox/jquery-modal) - Version 0.9.0 + Version 0.9.1 */ (function (factory) { diff --git a/jquery.modal.min.css b/jquery.modal.min.css index c686aa7..f568c62 100644 --- a/jquery.modal.min.css +++ b/jquery.modal.min.css @@ -1 +1 @@ -.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:inline-block;vertical-align:middle;position:relative;z-index:2;max-width:500px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}} \ No newline at end of file +.blocker{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;height:100%;overflow:auto;z-index:1;padding:20px;box-sizing:border-box;background-color:#000;background-color:rgba(0,0,0,0.75);text-align:center}.blocker:before{content:"";display:inline-block;height:100%;vertical-align:middle;margin-right:-0.05em}.blocker.behind{background-color:transparent}.modal{display:none;vertical-align:middle;position:relative;z-index:2;max-width:500px;box-sizing:border-box;width:90%;background:#fff;padding:15px 30px;-webkit-border-radius:8px;-moz-border-radius:8px;-o-border-radius:8px;-ms-border-radius:8px;border-radius:8px;-webkit-box-shadow:0 0 10px #000;-moz-box-shadow:0 0 10px #000;-o-box-shadow:0 0 10px #000;-ms-box-shadow:0 0 10px #000;box-shadow:0 0 10px #000;text-align:left}.modal a.close-modal{position:absolute;top:-12.5px;right:-12.5px;display:block;width:30px;height:30px;text-indent:-9999px;background-size:contain;background-repeat:no-repeat;background-position:center center;background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAAAXNSR0IArs4c6QAAA3hJREFUaAXlm8+K00Acx7MiCIJH/yw+gA9g25O49SL4AO3Bp1jw5NvktC+wF88qevK4BU97EmzxUBCEolK/n5gp3W6TTJPfpNPNF37MNsl85/vN/DaTmU6PknC4K+pniqeKJ3k8UnkvDxXJzzy+q/yaxxeVHxW/FNHjgRSeKt4rFoplzaAuHHDBGR2eS9G54reirsmienDCTRt7xwsp+KAoEmt9nLaGitZxrBbPFNaGfPloGw2t4JVamSt8xYW6Dg1oCYo3Yv+rCGViV160oMkcd8SYKnYV1Nb1aEOjCe6L5ZOiLfF120EjWhuBu3YIZt1NQmujnk5F4MgOpURzLfAwOBSTmzp3fpDxuI/pabxpqOoz2r2HLAb0GMbZKlNV5/Hg9XJypguryA7lPF5KMdTZQzHjqxNPhWhzIuAruOl1eNqKEx1tSh5rfbxdw7mOxCq4qS68ZTjKS1YVvilu559vWvFHhh4rZrdyZ69Vmpgdj8fJbDZLJpNJ0uv1cnr/gjrUhQMuI+ANjyuwftQ0bbL6Erp0mM/ny8Fg4M3LtdRxgMtKl3jwmIHVxYXChFy94/Rmpa/pTbNUhstKV+4Rr8lLQ9KlUvJKLyG8yvQ2s9SBy1Jb7jV5a0yapfF6apaZLjLLcWtd4sNrmJUMHyM+1xibTjH82Zh01TNlhsrOhdKTe00uAzZQmN6+KW+sDa/JD2PSVQ873m29yf+1Q9VDzfEYlHi1G5LKBBWZbtEsHbFwb1oYDwr1ZiF/2bnCSg1OBE/pfr9/bWx26UxJL3ONPISOLKUvQza0LZUxSKyjpdTGa/vDEr25rddbMM0Q3O6Lx3rqFvU+x6UrRKQY7tyrZecmD9FODy8uLizTmilwNj0kraNcAJhOp5aGVwsAGD5VmJBrWWbJSgWT9zrzWepQF47RaGSiKfeGx6Szi3gzmX/HHbihwBser4B9UJYpFBNX4R6vTn3VQnez0SymnrHQMsRYGTr1dSk34ljRqS/EMd2pLQ8YBp3a1PLfcqCpo8gtHkZFHKkTX6fs3MY0blKnth66rKCnU0VRGu37ONrQaA4eZDFtWAu2fXj9zjFkxTBOo8F7t926gTp/83Kyzzcy2kZD6xiqxTYnHLRFm3vHiRSwNSjkz3hoIzo8lCKWUlg/YtGs7tObunDAZfpDLbfEI15zsEIY3U/x/gHHc/G1zltnAgAAAABJRU5ErkJggg==')}.modal-spinner{display:none;position:fixed;top:50%;left:50%;transform:translateY(-50%) translateX(-50%);padding:12px 16px;border-radius:5px;background-color:#111;height:20px}.modal-spinner>div{border-radius:100px;background-color:#fff;height:20px;width:2px;margin:0 1px;display:inline-block;-webkit-animation:sk-stretchdelay 1.2s infinite ease-in-out;animation:sk-stretchdelay 1.2s infinite ease-in-out}.modal-spinner .rect2{-webkit-animation-delay:-1.1s;animation-delay:-1.1s}.modal-spinner .rect3{-webkit-animation-delay:-1.0s;animation-delay:-1.0s}.modal-spinner .rect4{-webkit-animation-delay:-0.9s;animation-delay:-0.9s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.5)}20%{-webkit-transform:scaleY(1.0)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.5);-webkit-transform:scaleY(0.5)}20%{transform:scaleY(1.0);-webkit-transform:scaleY(1.0)}} \ No newline at end of file diff --git a/jquery.modal.min.js b/jquery.modal.min.js index cbb451f..690d509 100644 --- a/jquery.modal.min.js +++ b/jquery.modal.min.js @@ -1,5 +1,5 @@ /* A simple jQuery modal (http://github.com/kylefox/jquery-modal) - Version 0.9.0 + Version 0.9.1 */ -!function(o){"object"==typeof module&&"object"==typeof module.exports?o(require("jquery"),window,document):o(jQuery,window,document)}(function(o,t,i,e){var s=[],l=function(){return s.length?s[s.length-1]:null},n=function(){var o,t=!1;for(o=s.length-1;o>=0;o--)s[o].$blocker&&(s[o].$blocker.toggleClass("current",!t).toggleClass("behind",t),t=!0)};o.modal=function(t,i){var e,n;if(this.$body=o("body"),this.options=o.extend({},o.modal.defaults,i),this.options.doFade=!isNaN(parseInt(this.options.fadeDuration,10)),this.$blocker=null,this.options.closeExisting)for(;o.modal.isActive();)o.modal.close();if(s.push(this),t.is("a"))if(n=t.attr("href"),this.anchor=t,/^#/.test(n)){if(this.$elm=o(n),1!==this.$elm.length)return null;this.$body.append(this.$elm),this.open()}else this.$elm=o("