From 02871acef4220576d822f008dad3c9f39c4fb5b3 Mon Sep 17 00:00:00 2001 From: Matthew Sigley Date: Fri, 18 Oct 2013 12:08:27 -0400 Subject: [PATCH] Initial release --- jquery-modal.js | 173 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 173 insertions(+) create mode 100644 jquery-modal.js diff --git a/jquery-modal.js b/jquery-modal.js new file mode 100644 index 0000000..0244b70 --- /dev/null +++ b/jquery-modal.js @@ -0,0 +1,173 @@ +/* + * jQuery Chaos Modal + * By Matthew Sigley + * Based on work by Kevin Liew - http://www.queness.com/post/77/simple-jquery-modal-window-tutorial + * Version 20120514 + * Recent changes: + * - Clones content container and appends to body for absolute positioning relative to body + * - Added max width variable so you can keep modal content inside your wrapper div's width + * Things left to do: + * -Jquery animation queue integration + * -Function parameters for changing the default CSS styles + * -Change namespacing of functions to work similar to $('#example').modal("open") + * -Add maxWidth parameter to openModal function + * -Add position parameter to openModal function + * -Update and test resizeModal function + */ + +(function( $ ) { + //Property to store the modal current being displayed + var currentModal; + var maxWidth = 960; + + $.fn.openModal = function() { + //Clone modal content + var clone = this.clone(); + + //Update currentModal + currentModal = clone; + + //Write the mask div + $('body').append('
'); + $('body').children('.modal-mask').css({'position': 'absolute', 'z-index': '9000', 'background-color': '#000', 'display': 'none', 'top': '0', 'left': '0'}); + $('body').append(clone); + + //Write print link if none exist + if(clone.find('.print-link').length == 0) { + clone.prepend('Print'); + clone.children('.print-link').css({'float': 'right', 'padding': '0 0 10px 10px'}); + } + + //Write close link if none exist + if(clone.find('.close-link').length == 0) { + clone.prepend('Close'); + clone.children('.close-link').css({'float': 'right', 'padding': '0 0 10px 10px'}); + } + + //Get the screen height and width + var maskHeight = $(document).height(); + var maskWidth = $(window).width(); + + //Check for invalid mask dimensions + if(maskHeight < clone.height()) { maskHeight = clone.height(); } + + //Set height and width to mask to fill up the whole screen + $('body').children('.modal-mask').css({'width':maskWidth,'height':maskHeight}); + + //transition effect + $('body').children('.modal-mask').fadeIn(1000); + $('body').children('.modal-mask').fadeTo("slow",0.8); + + //Get the window height and width + var winH = $(window).height(); + var winW = $(window).width(); + + //Set the popup window css + clone.css('position', 'absolute'); + clone.css('background', '#fff'); + clone.css('z-index', '9001'); + + //Lock popup window width + if(clone.width() > maxWidth){ + clone.width(maxWidth); + } else { + clone.width(clone.width()); + } + //Calculate popup window position + var modalTop = winH/2-clone.height()/2; + var modalLeft = winW/2-clone.width()/2; + + //Check for invalid window positions + if (modalTop < 0) { modalTop = 0; } + if (modalLeft < 0) { modalLeft = 0; } + + //Set the popup window to center + clone.css('top', modalTop); + clone.css('left', modalLeft); + + //transition effect + clone.fadeIn(2000); + + //Bind the window resize event + $(window).bind('resize', resizeCurrentModal); + + //Bind the print link events if any close links exist + if(clone.find('.print-link').length > 0) { + clone.find('.print-link').bind('click', printCurrentModal); + } + + //Bind the close link events if any close links exist + if(clone.find('.close-link').length > 0) { + clone.find('.close-link').bind('click', closeCurrentModal); + } + + return this; + }; + + $.fn.closeModal = function() { + //Clear currentModal + currentModal = null; + + //Unbind the window resize event + $(window).unbind('resize', resizeCurrentModal); + + //Unbind the close link events if any close links exist + if(this.find('.close-link').length > 0) { + this.find('.close-link').unbind('click'); + } + + //Hide the popup window + this.hide().remove(); + + //Remove the mask div + $('body').children('.modal-mask').hide().remove(); + + return this; + }; + + $.fn.resizeModal = function() { + //Get the screen height and width + var maskHeight = $(document).height(); + var maskWidth = $(window).width(); + + //Get the window height and width + var winH = $(window).height(); + var winW = $(window).width(); + + //Check for invalid mask dimensions + if(maskHeight < this.height()) { maskHeight = this.height(); } + + //Set height and width to mask to fill up the whole screen + $('body').children('.modal-mask').css({'width':maskWidth,'height':maskHeight}); + + //Calculate popup window position + var modalTop = winH/2-this.height()/2; + var modalLeft = winW/2-this.width()/2; + + //Check for invalid window positions + if (modalTop < 0) { modalTop = 0; } + if (modalLeft < 0) { modalLeft = 0; } + + //Set the popup window to center + this.css('top', modalTop); + this.css('left', modalLeft); + + return this; + }; + + $.fn.printModal = function() { + window.print(); + }; + + function resizeCurrentModal() { + currentModal.resizeModal(); + } + + function closeCurrentModal() { + currentModal.closeModal(); + } + + function printCurrentModal() { + currentModal.printModal(); + } +})( jQuery ); \ No newline at end of file