diff --git a/README.md b/README.md index 6c6e3a8..bda6f4c 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,13 @@ -# Modal v1.17.0 +# Modal v1.17.1 Library for opening content in a modal window. Built to be used with web applications and ajax. - Requires jQuery 1.7+ +### new in 1.17.1 + +Added support for nested modals. Modal windows will get appended after the last. when nested modals are closed, the previous modal will be displayed until the last one is closed which will destroy the modal elements. + ### new in 1.17.0 Added module support diff --git a/bower.json b/bower.json index ca3ba4e..1e24fdc 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "modal", - "version": "1.17.0", + "version": "1.17.1", "license": "MIT", diff --git a/demo/index.html b/demo/index.html index f6f5fbf..20fd21f 100755 --- a/demo/index.html +++ b/demo/index.html @@ -11,13 +11,24 @@ @@ -34,7 +45,7 @@

Header

HTML Ipsum Presents

-

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

+

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

@@ -62,8 +73,18 @@

Header Level 3

+ +
-

Open Modal

+

Open Modal

diff --git a/dist/jquery.modal.min.js b/dist/jquery.modal.min.js index 5123e59..bb68bc0 100644 --- a/dist/jquery.modal.min.js +++ b/dist/jquery.modal.min.js @@ -1 +1 @@ -!function(t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],t):t(window.jQuery)}(function(a){"use strict";var n=function(t,s){this.namespace="modal-"+a.fn.modal2.count,this.$container=a(s.container),this.$selector=t,this.settings=s,this.modalOpen=!1,this.$modal=null,this.$modalInside=null,this.$overlay=null,this.$selector?a(this.$selector).off("click.modal").on("click.modal",a.proxy(this.show,this)):this.show(),a.fn.modal2.count++};n.prototype.addEvents=function(){var s=this;a(this.settings.closeModalName).on("click."+this.namespace,a.proxy(this.close,this)),a(document).on("keydown."+this.namespace,a.proxy(this.close,this)),this.$modal.on("click."+this.namespace,function(t){a(t.target).closest("."+s.settings.modalContentName).length||s.close()})},n.prototype.removeEvents=function(){a(this.settings.closeModalName).off("."+this.namespace),this.$modalInside.off("."+this.namespace),this.$modal.off("."+this.namespace),a(document).off("."+this.namespace)},n.prototype.show=function(t){"object"==typeof t&&t.preventDefault&&(t.preventDefault(),t.stopPropagation()),this.settings.html?(this.append(this.settings.html),this.open(),this.settings.afterInit.call(this,a(this.$selector))):a(this.$selector).data("target")?(this.append(a(a(this.$selector).data("target")).html()),this.open(),this.settings.afterInit.call(this,a(this.$selector))):this.settings.ajax&&"string"==typeof this.settings.ajax.url?(this.append(),this.load(this.settings.ajax.url),this.settings.afterInit.call(this,a(this.$selector))):a(this.$selector).attr("href")?(this.append(),this.load(a(this.$selector).attr("href")),this.settings.afterInit.call(this,a(this.$selector))):this.close()},n.prototype.close=function(t){var s=this,e=!1;if(this.modalOpen){if("object"==typeof t){if(e=t.type,"keydown"===t.type&&(27!==t.keyCode||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey))return;t.preventDefault(),t.stopPropagation()}(this.settings.allowClose||"closeModal"===e||"ajaxComplete"===e)&&(this.settings.onBeforeClose.call(this,a(this.$selector)),this.$overlay.removeClass("show in"),this.$modal.removeClass("show in"),this.modalOpen=!1,this.$modal.animate({top:-2*this.$modal.outerHeight(!0)},function(){a("body").removeClass("modal-open"),s.$overlay.remove(),s.$modal.remove(),s.removeEvents(),s.settings.afterClose.call(this,a(this.$selector))}))}},n.prototype.load=function(t){var o=this,s=a.extend({},this.settings.ajax);this.$modalInside.addClass("loading"),this.$overlay.addClass("show in"),this.$modal.addClass("show in"),this.$modalInside.css({background:"#fff",maxHeight:"50px",maxWidth:"50px",margin:"0 auto",height:"100%",width:"100%"}),s.success=function(t,s,e){o.$modalInside.empty().append(t).css({maxHeight:"2000px",maxWidth:"2000px"}),o.open(),"function"==typeof o.settings.ajax.success&&o.settings.ajax.success.call(o,t,s,e)},s.error=function(t,s,e){o.close(),"function"==typeof o.settings.ajax.error&&o.settings.ajax.error.call(o,t,s,e)},s.complete=function(t,s){o.$modalInside.removeClass("loading"),"function"==typeof o.settings.ajax.complete&&o.settings.ajax.complete.call(o,t,s)},a.ajax(s)},n.prototype.open=function(){var t=this;this.modalOpen||(this.modalOpen=!0,this.settings.centered?(this.$overlay.addClass("show in"),this.$modal.addClass("show in")):(this.$modal.css({marginTop:-this.$modal.height()}),setTimeout(function(){t.$overlay.addClass("show in"),t.$modal.css({marginTop:0}).addClass("show in")},10)),this.$container.addClass("modal-open"),this.addEvents(),this.$modal.find("[autofocus]").focus(),this.settings.afterOpen.call(this,a(this.$selector)))},n.prototype.append=function(t){var s=a("."+this.settings.modalName,this.$container);s&&s.length&&s.remove(),s=null,this.$modalDialog=a('
'),this.$modalInside=a('
'),this.$overlay=a('
'),this.$closeBtn=a(this.settings.closeModalName,this.$modalInside),this.$modalDialog.append(this.$modalInside),this.$modal=a(''),this.$modal.append(this.$modalDialog),t&&this.$modalInside.empty().append(t),this.settings.centered&&this.$modal.addClass("modal-centered"),"body"===this.settings.container&&this.$modal.addClass("fixed"),this.settings.width&&this.$modalDialog.css({"max-width":this.settings.width}),this.$container.append(this.$overlay),this.$container.append(this.$modal),this.$overlay.show(),this.$modal.show()};var s=function(t,s){var e=a(t);if((t=e).is(document)&&(t=!1),"object"==typeof s||void 0===s){var o=new n(t,s);e.data("modal",o)}else if("string"==typeof s){var i=e.data("modal");"object"==typeof i&&"close"===s&&a.isFunction(i.close)&&i.close()}};return a.fn.modal2=function(t){return"string"!=typeof t&&(t=a.extend(!0,{},a.fn.modal2.defaults,t)),this.each(function(){return s(this,t),this})},a.modal2=function(t){return"string"!=typeof t&&(t=a.extend(!0,{},a.fn.modal2.defaults,t)),s(document,t),this},a.fn.modal2.count=0,a.fn.modal2.defaults={closeModalName:'[data-dismiss="modal2"]',backdropName:"modal-backdrop",modalDialogName:"modal-dialog",modalContentName:"modal-content",modalSkin:"default",modalName:"modal",container:"body",html:!1,ajax:!1,width:!1,centered:!1,allowClose:!0,afterInit:a.noop,afterOpen:a.noop,afterClose:a.noop,onBeforeClose:a.noop},a.modal2}); \ No newline at end of file +!function(t){"use strict";"object"==typeof module&&"object"==typeof module.exports?module.exports=t(require("jquery")):"function"==typeof define&&define.amd?define(["jquery"],t):t(window.jQuery)}(function(a){"use strict";var n=function(t,s){this.namespace="modal-"+a.fn.modal2.count,this.$container=a(s.container),this.$selector=t,this.settings=s,this.modalOpen=!1,this.$modal=null,this.$modalInside=null,this.$overlay=null,this.$selector?a(this.$selector).off("click.modal").on("click.modal",a.proxy(this.show,this)):this.show(),a.fn.modal2.count++};n.prototype.addEvents=function(){var s=this;a(this.settings.closeModalName).on("click."+this.namespace,a.proxy(this.close,this)),a(document).on("keydown."+this.namespace,a.proxy(this.close,this)),this.$modal.on("click."+this.namespace,function(t){a(t.target).closest("."+s.settings.modalContentName).length||s.close()})},n.prototype.removeEvents=function(){a(this.settings.closeModalName).off("."+this.namespace),this.$modalInside.off("."+this.namespace),this.$modal.off("."+this.namespace),a(document).off("."+this.namespace)},n.prototype.show=function(t){"object"==typeof t&&t.preventDefault&&(t.preventDefault(),t.stopPropagation()),this.settings.html?(this.append(this.settings.html),this.open(),this.settings.afterInit.call(this,a(this.$selector))):a(this.$selector).data("target")?(this.append(a(a(this.$selector).data("target")).html()),this.open(),this.settings.afterInit.call(this,a(this.$selector))):this.settings.ajax&&"string"==typeof this.settings.ajax.url?(this.append(),this.load(this.settings.ajax.url),this.settings.afterInit.call(this,a(this.$selector))):a(this.$selector).attr("href")?(this.append(),this.load(a(this.$selector).attr("href")),this.settings.afterInit.call(this,a(this.$selector))):this.close()},n.prototype.close=function(t){var s,e=this,o=!1;if(this.modalOpen){if("object"==typeof t){if(o=t.type,"keydown"===t.type&&(27!==t.keyCode||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey))return;t.preventDefault(),t.stopPropagation()}s=this.$modal.children("."+this.settings.modalDialogName).length,(this.settings.allowClose||"closeModal"===o||"ajaxComplete"===o)&&(this.settings.onBeforeClose.call(this,a(this.$selector)),this.modalOpen=!1,1'),this.$overlay=e.length&&e||a('
'),this.$modalDialog=a('
'),this.$modalInside=a('
'),this.$closeBtn=a(this.settings.closeModalName,this.$modalInside),this.$modalDialog.append(this.$modalInside),this.$modal.append(this.$modalDialog),t&&this.$modalInside.empty().append(t),this.settings.centered&&this.$modal.addClass("modal-centered"),"body"===this.settings.container&&this.$modal.addClass("fixed"),this.settings.width&&this.$modalDialog.css({"max-width":this.settings.width}),this.$container.append(this.$overlay),this.$container.append(this.$modal),this.$overlay.show(),this.$modal.show()};var s=function(t,s){var e=a(t);if((t=e).is(document)&&(t=!1),"object"==typeof s||void 0===s){var o=new n(t,s);e.data("modal",o)}else if("string"==typeof s){var i=e.data("modal");"object"==typeof i&&"close"===s&&a.isFunction(i.close)&&i.close()}};return a.fn.modal2=function(t){return"string"!=typeof t&&(t=a.extend(!0,{},a.fn.modal2.defaults,t)),this.each(function(){return s(this,t),this})},a.modal2=function(t){return"string"!=typeof t&&(t=a.extend(!0,{},a.fn.modal2.defaults,t)),s(document,t),this},a.fn.modal2.count=0,a.fn.modal2.defaults={closeModalName:'[data-dismiss="modal2"]',backdropName:"modal-backdrop",modalDialogName:"modal-dialog",modalContentName:"modal-content",modalSkin:"default",modalName:"modal",container:"body",html:!1,ajax:!1,width:!1,centered:!1,allowClose:!0,afterInit:a.noop,afterOpen:a.noop,afterClose:a.noop,onBeforeClose:a.noop},a.modal2}); \ No newline at end of file diff --git a/dist/modal.min.css b/dist/modal.min.css index a552708..0660967 100644 --- a/dist/modal.min.css +++ b/dist/modal.min.css @@ -1 +1 @@ -.modal-centered{-webkit-box-align:center !important;-ms-flex-align:center !important;display:-webkit-box !important;display:-ms-flexbox !important;align-items:center !important;display:flex !important;min-height:calc(100% - (0.5rem * 2))}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{overflow:hidden;position:fixed;z-index:1050;display:none;outline:0;bottom:0;right:0;left:0;top:0}.modal .close{cursor:pointer}.modal.fade{transition:opacity 0.15s linear}.modal.fade{transition:-webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out;transition:transform 0.3s ease-out, -webkit-transform 0.3s ease-out;-webkit-transform:translate(0, -25%);transform:translate(0, -25%)}.modal.fade.show,.modal.show{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.modal-dialog{pointer-events:none;position:relative;margin:2.75rem auto;max-width:800px;width:100%}.modal-content{box-shadow:0 3px 7px rgba(0,0,0,0.3);transition:all .2s ease-in-out;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-clip:padding-box;-ms-flex-direction:column;flex-direction:column;background-color:#fff;pointer-events:auto;display:-webkit-box;display:-ms-flexbox;position:relative;margin:0 auto;display:flex;width:100%;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000;transition:opacity 0.15s linear}.modal-backdrop.fade{opacity:0}.modal-backdrop.fade.show,.modal-backdrop.show{opacity:0.5}.modal-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1rem;border-bottom:1px solid #e9ecef;border-top-left-radius:0.3rem;border-top-right-radius:0.3rem}.modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.modal-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #e9ecef}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}@media (min-width: 576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-centered{min-height:calc(100% - (1.75rem * 2))}.modal-sm{max-width:300px}}@media (min-width: 992px){.modal-lg{max-width:800px}} +.modal-centered{-webkit-box-align:center !important;-ms-flex-align:center !important;display:-webkit-box !important;display:-ms-flexbox !important;align-items:center !important;display:flex !important;min-height:calc(100% - (0.5rem * 2))}.modal-open{overflow:hidden}.modal-open .modal{overflow-x:hidden;overflow-y:auto}.modal{overflow:hidden;position:fixed;z-index:1050;display:none;outline:0;bottom:0;right:0;left:0;top:0}.modal .close{cursor:pointer}.modal.fade{transition:opacity 0.15s linear}.modal.fade{transition:-webkit-transform 0.3s ease-out;transition:transform 0.3s ease-out;transition:transform 0.3s ease-out, -webkit-transform 0.3s ease-out;-webkit-transform:translate(0, -25%);transform:translate(0, -25%)}.modal.fade.show,.modal.show{-webkit-transform:translate(0, 0);transform:translate(0, 0)}.modal-dialog{pointer-events:none;margin:2.75rem auto;position:absolute;max-width:800px;width:100%;right:0;left:0;top:0}.modal-content{box-shadow:0 3px 7px rgba(0,0,0,0.3);transition:all .2s ease-in-out;-webkit-box-orient:vertical;-webkit-box-direction:normal;background-clip:padding-box;-ms-flex-direction:column;flex-direction:column;background-color:#fff;pointer-events:auto;display:-webkit-box;display:-ms-flexbox;position:relative;margin:0 auto;display:flex;width:100%;outline:0}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000;transition:opacity 0.15s linear}.modal-backdrop.fade{opacity:0}.modal-backdrop.fade.show,.modal-backdrop.show{opacity:0.5}.modal-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;padding:1rem;border-bottom:1px solid #e9ecef;border-top-left-radius:0.3rem;border-top-right-radius:0.3rem}.modal-header .close{padding:1rem;margin:-1rem -1rem -1rem auto}.modal-title{margin-bottom:0;line-height:1.5}.modal-body{position:relative;-webkit-box-flex:1;-ms-flex:1 1 auto;flex:1 1 auto;padding:1rem}.modal-footer{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end;padding:1rem;border-top:1px solid #e9ecef}.modal-footer>:not(:first-child){margin-left:.25rem}.modal-footer>:not(:last-child){margin-right:.25rem}@media (min-width: 576px){.modal-dialog{max-width:500px;margin:1.75rem auto}.modal-centered{min-height:calc(100% - (1.75rem * 2))}.modal-sm{max-width:300px}}@media (min-width: 992px){.modal-lg{max-width:800px}} diff --git a/package.json b/package.json index 1e3ded6..acf1f33 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "modal", - "version": "1.17.0", + "version": "1.17.1", "main": "src/jquery.modal.js", "repository": { "type": "git", diff --git a/src/jquery.modal.js b/src/jquery.modal.js index 5369d4b..760f6c4 100755 --- a/src/jquery.modal.js +++ b/src/jquery.modal.js @@ -1,10 +1,10 @@ /*! * Name: Modal * Author: Mitchell Petty - * Version: 1.17.0 + * Version: 1.17.1 * Notes: Requires jquery 1.7+ */ -(function(factory) { +(function (factory) { "use strict"; if (typeof module === "object" && typeof module.exports === "object") { @@ -14,20 +14,20 @@ } else { factory(window.jQuery); } -}(function($) { +}(function ($) { "use strict"; - var Modal = function(selector, settings) { - this.namespace = 'modal-'+$.fn.modal2.count; - this.$container = $(settings.container); - this.$selector = selector; - this.settings = settings; - this.modalOpen = false; - this.$modal = null; - this.$modalInside = null; - this.$overlay = null; - - if(!this.$selector) { + var Modal = function (selector, settings) { + this.namespace = 'modal-' + $.fn.modal2.count; + this.$container = $(settings.container); + this.$selector = selector; + this.settings = settings; + this.modalOpen = false; + this.$modal = null; + this.$modalInside = null; + this.$overlay = null; + + if (!this.$selector) { this.show(); } else { $(this.$selector).off('click.modal').on('click.modal', $.proxy(this.show, this)); @@ -36,11 +36,11 @@ $.fn.modal2.count++; }; - Modal.prototype.addEvents = function() { + Modal.prototype.addEvents = function () { var self = this; - $(this.settings.closeModalName).on('click.'+this.namespace, $.proxy(this.close, this)); - $(document).on('keydown.'+this.namespace, $.proxy(this.close, this)); + $(this.settings.closeModalName).on('click.' + this.namespace, $.proxy(this.close, this)); + $(document).on('keydown.' + this.namespace, $.proxy(this.close, this)); this.$modal.on('click.' + this.namespace, function (e) { if (!$(e.target).closest('.' + self.settings.modalContentName).length) { @@ -49,69 +49,68 @@ }); }; - Modal.prototype.removeEvents = function() { - $(this.settings.closeModalName).off('.'+this.namespace); - this.$modalInside.off('.'+this.namespace); + Modal.prototype.removeEvents = function () { + $(this.settings.closeModalName).off('.' + this.namespace); + this.$modalInside.off('.' + this.namespace); this.$modal.off('.' + this.namespace); - $(document).off('.'+this.namespace); + $(document).off('.' + this.namespace); }; - Modal.prototype.show = function(e) { + Modal.prototype.show = function (e) { // Prevent default action - if(typeof e === 'object' && e.preventDefault) { + if (typeof e === 'object' && e.preventDefault) { e.preventDefault(); e.stopPropagation(); } // Load via content options - if(this.settings.html) { + if (this.settings.html) { this.append(this.settings.html); this.open(); this.settings.afterInit.call(this, $(this.$selector)); - // Load via selector target - } else if($(this.$selector).data('target')) { + // Load via selector target + } else if ($(this.$selector).data('target')) { this.append($($(this.$selector).data('target')).html()); this.open(); this.settings.afterInit.call(this, $(this.$selector)); - // Load via ajax options - } else if(this.settings.ajax && typeof this.settings.ajax.url === 'string') { + // Load via ajax options + } else if (this.settings.ajax && typeof this.settings.ajax.url === 'string') { this.append(); this.load(this.settings.ajax.url); this.settings.afterInit.call(this, $(this.$selector)); - // Load via selector href - } else if($(this.$selector).attr('href')) { + // Load via selector href + } else if ($(this.$selector).attr('href')) { this.append(); this.load($(this.$selector).attr('href')); this.settings.afterInit.call(this, $(this.$selector)); - // Nothing loaded, exit modal + // Nothing loaded, exit modal } else { this.close(); } }; - Modal.prototype.close = function(e) { + Modal.prototype.close = function (e) { var - self = this, - timeout = null, - type = false, - keyEvent = false; + self = this, + type = false, + modalCount = 1; - // Quit if no modals - if(!this.modalOpen) return; + // Quit if no modals + if (!this.modalOpen) return; // If e is object - if(typeof e ==='object') { + if (typeof e === 'object') { type = e.type; - if(e.type === 'keydown') { - if(e.keyCode !== 27 || (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) { + if (e.type === 'keydown') { + if (e.keyCode !== 27 || (e.altKey || e.ctrlKey || e.metaKey || e.shiftKey)) { return; } } @@ -120,29 +119,40 @@ e.stopPropagation(); } + // Count the modals + modalCount = this.$modal.children('.' + this.settings.modalDialogName).length; + // Destroy the modal - if(this.settings.allowClose || type === 'closeModal' || type === 'ajaxComplete') { + if (this.settings.allowClose || type === 'closeModal' || type === 'ajaxComplete') { this.settings.onBeforeClose.call(this, $(this.$selector)); - this.$overlay.removeClass('show in'); - this.$modal.removeClass('show in'); this.modalOpen = false; - this.$modal.animate({top: -(this.$modal.outerHeight(true)*2)}, function() { - $('body').removeClass('modal-open'); - self.$overlay.remove(); - self.$modal.remove(); - self.removeEvents(); - self.settings.afterClose.call(this, $(this.$selector)); - }); + if (modalCount > 1) { + this.$modalDialog.prev('.' + this.settings.modalDialogName).show(); + this.$modalDialog.remove(); + this.removeEvents(); + this.settings.afterClose.call(this, $(this.$selector)); + } else { + this.$overlay.removeClass('show in'); + this.$modal.removeClass('show in'); + + this.$modal.animate({ top: -(this.$modal.outerHeight(true) * 2) }, function () { + $('body').removeClass('modal-open'); + self.$overlay.remove(); + self.$modal.remove(); + self.removeEvents(); + self.settings.afterClose.call(this, $(this.$selector)); + }); + } } }; - Modal.prototype.load = function(url) { + Modal.prototype.load = function (url) { var - self = this, - ajaxOptions = $.extend({}, this.settings.ajax); + self = this, + ajaxOptions = $.extend({}, this.settings.ajax); // added loading class this.$modalInside.addClass('loading'); @@ -160,7 +170,7 @@ }); // Send request for content - ajaxOptions.success = function(data, status, ajaxObj) { + ajaxOptions.success = function (data, status, ajaxObj) { self.$modalInside .empty() .append(data) @@ -171,23 +181,23 @@ self.open(); - if(typeof self.settings.ajax.success === 'function') { + if (typeof self.settings.ajax.success === 'function') { self.settings.ajax.success.call(self, data, status, ajaxObj); } }; - ajaxOptions.error = function(ajaxObj, status, error) { + ajaxOptions.error = function (ajaxObj, status, error) { self.close(); - if(typeof self.settings.ajax.error === 'function') { + if (typeof self.settings.ajax.error === 'function') { self.settings.ajax.error.call(self, ajaxObj, status, error); } }; - ajaxOptions.complete = function(ajaxObj, status) { + ajaxOptions.complete = function (ajaxObj, status) { self.$modalInside.removeClass('loading'); - if(typeof self.settings.ajax.complete === 'function') { + if (typeof self.settings.ajax.complete === 'function') { self.settings.ajax.complete.call(self, ajaxObj, status); } }; @@ -197,25 +207,31 @@ }; - Modal.prototype.open = function() { + Modal.prototype.open = function () { var self = this; // Do nothing, already open - if(this.modalOpen) return; + if (this.modalOpen) return; // Set modal to open this.modalOpen = true; + // Count the modals + if (this.$modal.children('.' + this.settings.modalDialogName).length > 1) { + this.$modal.children('.' + this.settings.modalDialogName).hide(); + this.$modalDialog.show(); + } + // Fade in - if(!this.settings.centered) { + if (!this.settings.centered) { this.$modal.css({ - 'marginTop':-this.$modal.height() + 'marginTop': -this.$modal.height() }); - setTimeout(function() { + setTimeout(function () { self.$overlay.addClass('show in'); - self.$modal.css({'marginTop':0}).addClass('show in'); + self.$modal.css({ 'marginTop': 0 }).addClass('show in'); }, 10); } else { this.$overlay.addClass('show in'); @@ -236,40 +252,40 @@ }; - Modal.prototype.append = function(html) { + Modal.prototype.append = function (html) { // Remove old modal - var $modal = $('.'+this.settings.modalName, this.$container); - if($modal && $modal.length) $modal.remove(); $modal = null; + var $modal = $('.' + this.settings.modalName, this.$container); + var $overlay = $('.' + this.settings.backdropName); // Build markup + this.$modal = $modal.length && $modal || $(''); + this.$overlay = $overlay.length && $overlay || $('
'); this.$modalDialog = $('
'); this.$modalInside = $('
'); - this.$overlay = $('
'); this.$closeBtn = $(this.settings.closeModalName, this.$modalInside); this.$modalDialog.append(this.$modalInside); - this.$modal = $(''); this.$modal.append(this.$modalDialog); // Append modal content - if(html) { + if (html) { this.$modalInside.empty().append(html); } // Center container - if(this.settings.centered) { + if (this.settings.centered) { this.$modal.addClass('modal-centered'); } // Set to fixed if added to body - if(this.settings.container === 'body') { + if (this.settings.container === 'body') { this.$modal.addClass('fixed'); } // Set modal width - if(this.settings.width) { + if (this.settings.width) { this.$modalDialog.css({ - 'max-width' : this.settings.width + 'max-width': this.settings.width }); } @@ -282,16 +298,16 @@ }; // Create modal - var modalFactory = function(selector, options) { + var modalFactory = function (selector, options) { var dataSelector = $(selector); selector = dataSelector; - if(selector.is(document)) { + if (selector.is(document)) { selector = false; } // If modal initialized with settings - if (typeof(options) === 'object' || typeof(options) === 'undefined') { + if (typeof (options) === 'object' || typeof (options) === 'undefined') { // Create object var modal = new Modal(selector, options); @@ -299,17 +315,17 @@ // Add object reference to the selector dataSelector.data('modal', modal); - // If modal initialized with a method call + // If modal initialized with a method call } else if (typeof options === 'string') { // Set reference to selectors object var data = dataSelector.data('modal'); // Make sure the data is an object - if(typeof data === 'object') { + if (typeof data === 'object') { // Close Modal - if( options === 'close' && $.isFunction(data.close)) { + if (options === 'close' && $.isFunction(data.close)) { data.close(); } @@ -318,17 +334,17 @@ } }; - $.fn.modal2 = function(options) { - if(typeof options !== 'string') options = $.extend(true, {}, $.fn.modal2.defaults, options); + $.fn.modal2 = function (options) { + if (typeof options !== 'string') options = $.extend(true, {}, $.fn.modal2.defaults, options); - return this.each(function(){ + return this.each(function () { modalFactory(this, options); return this; }); }; - $.modal2 = function(options) { - if(typeof options !== 'string') options = $.extend(true, {}, $.fn.modal2.defaults, options); + $.modal2 = function (options) { + if (typeof options !== 'string') options = $.extend(true, {}, $.fn.modal2.defaults, options); modalFactory(document, options); return this; }; @@ -338,22 +354,22 @@ // Set options obj $.fn.modal2.defaults = { - closeModalName : '[data-dismiss="modal2"]', - backdropName : 'modal-backdrop', - modalDialogName : 'modal-dialog', - modalContentName : 'modal-content', - modalSkin : 'default', - modalName : 'modal', - container : 'body', - html : false, - ajax : false, - width : false, - centered : false, - allowClose : true, - afterInit : $.noop, - afterOpen : $.noop, - afterClose : $.noop, - onBeforeClose : $.noop + closeModalName: '[data-dismiss="modal2"]', + backdropName: 'modal-backdrop', + modalDialogName: 'modal-dialog', + modalContentName: 'modal-content', + modalSkin: 'default', + modalName: 'modal', + container: 'body', + html: false, + ajax: false, + width: false, + centered: false, + allowClose: true, + afterInit: $.noop, + afterOpen: $.noop, + afterClose: $.noop, + onBeforeClose: $.noop }; // return for module loader diff --git a/src/modal.scss b/src/modal.scss index 06c12e8..86cd283 100755 --- a/src/modal.scss +++ b/src/modal.scss @@ -61,10 +61,13 @@ $loadInsideName: 'load-inside'; .#{$modalDialogName} { pointer-events: none; - position: relative; margin: 2.75rem auto; + position: absolute; max-width: 800px; width: 100%; + right: 0; + left: 0; + top: 0; } .#{$modalContentName} {