diff --git a/README.md b/README.md new file mode 100644 index 0000000..65d8493 --- /dev/null +++ b/README.md @@ -0,0 +1,55 @@ +Original repo and How to Page +============================== + +https://github.com/shibbard/jQuery-modalPopLite + +http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite + + +New Updates +-------------- + +1- **openCallback:** Function will be called after the Modal has been opened + +2- **closeCallback:** Function will be called after the Modal has been closed + +3- **$(elem).on('openPopLiteModal'):** Trigger open ModalPolite + +4- **$(elem).on('closePopLiteModal'):** Trigger close ModalPolite + +5- **openButton:** String or Array of open buttons + +6- **closeButton:** String or Array of close buttons + +7- **isModal** – true or false. If true the popup is modal and clicking the background will not close the popup. Only the ‘closeButton’ target will. + + +Usage +=============== + +Step 1: Include files +---------------------- + + + + + + +Step 2: Create the page with an element to click and open the popup and a close button. +---------------------------------------------------------------------------------------- + +
Click Me!
+ + +Step 3: Attach the popup to a container on the page. +---------------------------------------------------- + + diff --git a/README.txt b/README.txt deleted file mode 100644 index ad42206..0000000 --- a/README.txt +++ /dev/null @@ -1,6 +0,0 @@ -This is a super simple and lightweight jQuery Modal Popup dialog box. - -How to guide can be found here: http://www.mywebdeveloperblog.com/my-jquery-plugins/modalpoplite - -Demo can be found here: http://www.mywebdeveloperblog.com/projects/modalpoplite/demo/ - diff --git a/ajax-loader.gif b/ajax-loader.gif deleted file mode 100644 index 8059cbf..0000000 Binary files a/ajax-loader.gif and /dev/null differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..a200f2a --- /dev/null +++ b/index.html @@ -0,0 +1,72 @@ + + + + + + A Simple Lightweight jQuery Modal Popup Box. + + + + + + + + + + A Simple Lightweight Modal Popup Box.
+ Option 'isModal' is set to true - if you want to be able to click the background to close the popup set it to false (which is the default). +

+ +
+ Click Me! +
+
+ Click Me! +
+
+ Click Me! +
+ + + + diff --git a/modalPopLite.js b/modalPopLite.js index d823a79..3c7ecd0 100644 --- a/modalPopLite.js +++ b/modalPopLite.js @@ -1,7 +1,7 @@ /* * jQuery modalPopLite * Copyright (c) 2012 Simon Hibbard -* +* * Permission is hereby granted, free of charge, to any person * obtaining a copy of this software and associated documentation * files (the "Software"), to deal in the Software without @@ -13,7 +13,7 @@ * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. -* +* * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND @@ -21,107 +21,131 @@ * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR -* OTHER DEALINGS IN THE SOFTWARE. +* OTHER DEALINGS IN THE SOFTWARE. */ /* -* Version: V1.3.2 -* Release: 10-01-2013 +* Version: V1.4 +* Release: 20-02-2014 * Based on jQuery from 1.7 to 1.11.0 / 2.1.0 */ -(function ($) { - var popID = 0; - $.fn.modalPopLite = function (options) { - var options = $.extend({}, { openButton: "modalPopLite-open-btn", closeButton: "modalPopLite-close-btn", isModal: false, callBack: null }, options); +(function ($, window) { + var popID = 0, + modalPopLite_mask = "#modalPopLite-mask", + modalPopLite_wrapper = "#modalPopLite-wrapper"; + + $.fn.modalPopLite = function (settings) { + var options = $.extend({}, { + openButton: "modalPopLite-open-btn", + closeButton: "modalPopLite-close-btn", + isModal: false, + openCallback: null, + closeCallback: null + }, settings); return this.each(function () { popID++; - var thisPopID = popID; - var isOpen = false; + var thisPopID = popID, + isOpen = false, + + obj = $(this), + openObj = options.openButton, + closeObj = options.closeButton, + isReallyModel = options.isModal, + openCallback = options.openCallback, + closeCallback = options.closeCallback, + + resizeBox = function () { + var winW = $(window).width(), + winH = $(window).height(), + objW = $('.modalPopLite-child-' + thisPopID).outerWidth(), + objH = $('.modalPopLite-child-' + thisPopID).outerHeight(), + left = (winW / 2) - (objW / 2), + top = (winH / 2) - (objH / 2); + + $(modalPopLite_wrapper + thisPopID).css({ 'left': left + "px", 'top': top }); + $(modalPopLite_mask + thisPopID).css('height', winH + "px"); + }, + openPopLiteModal = function (btn) { + $(document).on("click", btn, function (e) { + e.preventDefault(); + resizeBox(); + $(modalPopLite_mask + thisPopID).fadeTo('slow', 0.6); + $(modalPopLite_wrapper + thisPopID).fadeIn('slow'); + isOpen = true; + + if (typeof openCallback === 'function') { + openCallback.call(this); + } + }); + }, + closePopLiteModal = function (btn) { + $(document).on("click", btn, function (e) { + e.preventDefault(); + $(modalPopLite_mask + thisPopID).hide(); + $(modalPopLite_wrapper + thisPopID).css('left', "-10000px"); + + isOpen = false; - var obj = $(this); - var triggerObj = options.openButton; - var closeObj = options.closeButton; - var isReallyModel = options.isModal; + if (typeof closeCallback === 'function') { + closeCallback.call(this); + } + }); + }; - //alert("winH: " + winH + "top: " + top + "objH: " + objH); obj.before('
'); obj.wrap('
'); obj.addClass('modalPopLite-child-' + thisPopID); - $(triggerObj).on("click", function (e) { - e.preventDefault(); - var winW = $(window).width(); - var winH = $(window).height(); - var objW = $('.modalPopLite-child-' + thisPopID).outerWidth(); - var objH = $('.modalPopLite-child-' + thisPopID).outerHeight(); - var left = (winW / 2) - (objW / 2); - var top = (winH / 2) - (objH / 2); - - $('#modalPopLite-mask' + thisPopID).css('height', winH + "px"); - $('#modalPopLite-mask' + thisPopID).fadeTo('slow', 0.6); - //$('#modalPopLite-wrapper' + thisPopID).hide(); - $('#modalPopLite-wrapper' + thisPopID).css({ 'left': left + "px", 'top': top }); - $('#modalPopLite-wrapper' + thisPopID).fadeIn('slow'); - isOpen = true; - }); + // Check if we have array of open buttons + if ($.isArray(openObj)) { + for (var i = 0, len = openObj.length; i < len; i++) { + openPopLiteModal(openObj[i]); + } + } else { + openPopLiteModal(openObj); + } - $(closeObj).on("click", function (e) { - e.preventDefault(); - $('#modalPopLite-mask' + thisPopID).hide(); - //$('#modalPopLite-wrapper' + thisPopID).hide(); - $('#modalPopLite-wrapper' + thisPopID).css('left', "-10000px"); - isOpen = false; - if (options.callBack != null) { - options.callBack.call(this); + // Check if we have array of close buttons + if ($.isArray(closeObj)) { + for (var v = 0, closeLen = closeObj.length; v < closeLen; v++) { + closePopLiteModal(closeObj[v]); } + } else { + closePopLiteModal(closeObj); + } + + // Bind an event listener on object to trigger open without need to + // click on open button + + obj.bind('openPopLiteModal', function () { + openPopLiteModal(); + }); + + // Bind an event listener on object to trigger close without need to + // click on open button + + obj.bind('closePopLiteModal', function () { + closePopLiteModal(); }); + //if mask is clicked if (!isReallyModel) { - $('#modalPopLite-mask' + thisPopID).click(function (e) { + $(modalPopLite_mask + thisPopID).click(function (e) { e.preventDefault(); $(this).hide(); - //$('#modalPopLite-wrapper' + thisPopID).hide(); - $('#modalPopLite-wrapper' + thisPopID).css('left', "-10000px"); - isOpen = false; - if (options.callBack != null) { - options.callBack.call(this); - } + closePopLiteModal(); }); } $(window).resize(function () { if (isOpen) { - var winW = $(window).width(); - var winH = $(window).height(); - var objW = $('.modalPopLite-child-' + thisPopID).outerWidth(); - var objH = $('.modalPopLite-child-' + thisPopID).outerHeight(); - var left = (winW / 2) - (objW / 2); - var top = (winH / 2) - (objH / 2); - $('#modalPopLite-wrapper' + thisPopID).css({ 'left': left + "px", 'top': top }); - $('#modalPopLite-mask' + thisPopID).css('height', winH + "px"); + resizeBox(); } }); }); }; - $.fn.modalPopLite.Close = function (id) { - $('#modalPopLite-mask' + id).hide(); - //$('#modalPopLite-wrapper' + id).hide(); - $('#modalPopLite-wrapper' + thisPopID).css('left', "-10000px"); - if (options.callBack != null) { - options.callBack.call(this); - } - }; - - $.fn.modalPopLite.ShowProgress = function () { - $('
').appendTo("body") - }; - - $.fn.modalPopLite.HideProgress = function () { - $('.popBox-ajax-progress').remove(); - }; - -})(jQuery); +})(jQuery, window); diff --git a/modalPopLite.min.js b/modalPopLite.min.js index 37733bb..7958b17 100644 --- a/modalPopLite.min.js +++ b/modalPopLite.min.js @@ -1 +1,33 @@ -(function(e){var t=0;e.fn.modalPopLite=function(n){var n=e.extend({},{openButton:"modalPopLite-open-btn",closeButton:"modalPopLite-close-btn",isModal:false,callBack:null},n);return this.each(function(){t++;var r=t;var i=false;var s=e(this);var o=n.openButton;var u=n.closeButton;var a=n.isModal;s.before('
');s.wrap('
');s.addClass("modalPopLite-child-"+r);e(o).on("click",function(t){t.preventDefault();var n=e(window).width();var s=e(window).height();var o=e(".modalPopLite-child-"+r).outerWidth();var u=e(".modalPopLite-child-"+r).outerHeight();var a=n/2-o/2;var f=s/2-u/2;e("#modalPopLite-mask"+r).css("height",s+"px");e("#modalPopLite-mask"+r).fadeTo("slow",.6);e("#modalPopLite-wrapper"+r).css({left:a+"px",top:f});e("#modalPopLite-wrapper"+r).fadeIn("slow");i=true});e(u).on("click",function(t){t.preventDefault();e("#modalPopLite-mask"+r).hide();e("#modalPopLite-wrapper"+r).css("left","-10000px");i=false;if(n.callBack!=null){n.callBack.call(this)}});if(!a){e("#modalPopLite-mask"+r).click(function(t){t.preventDefault();e(this).hide();e("#modalPopLite-wrapper"+r).css("left","-10000px");i=false;if(n.callBack!=null){n.callBack.call(this)}})}e(window).resize(function(){if(i){var t=e(window).width();var n=e(window).height();var s=e(".modalPopLite-child-"+r).outerWidth();var o=e(".modalPopLite-child-"+r).outerHeight();var u=t/2-s/2;var a=n/2-o/2;e("#modalPopLite-wrapper"+r).css({left:u+"px",top:a});e("#modalPopLite-mask"+r).css("height",n+"px")}})})};e.fn.modalPopLite.Close=function(t){e("#modalPopLite-mask"+t).hide();e("#modalPopLite-wrapper"+thisPopID).css("left","-10000px");if(options.callBack!=null){options.callBack.call(this)}};e.fn.modalPopLite.ShowProgress=function(){e('
').appendTo("body")};e.fn.modalPopLite.HideProgress=function(){e(".popBox-ajax-progress").remove()}})(jQuery) \ No newline at end of file +/* +* jQuery modalPopLite +* Copyright (c) 2012 Simon Hibbard +* +* Permission is hereby granted, free of charge, to any person +* obtaining a copy of this software and associated documentation +* files (the "Software"), to deal in the Software without +* restriction, including without limitation the rights to use, +* copy, modify, merge, publish, distribute, sublicense, and/or sell +* copies of the Software, and to permit persons to whom the +* Software is furnished to do so, subject to the following +* conditions: + +* The above copyright notice and this permission notice shall be +* included in all copies or substantial portions of the Software. +* +* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, +* EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES +* OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND +* NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT +* HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, +* WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING +* FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR +* OTHER DEALINGS IN THE SOFTWARE. +*/ + +/* +* Version: V1.4 +* Release: 20-02-2014 +* Based on jQuery from 1.7 to 1.11.0 / 2.1.0 +*/ + +(function($,window){var popID=0,modalPopLite_mask="#modalPopLite-mask",modalPopLite_wrapper="#modalPopLite-wrapper";$.fn.modalPopLite=function(settings){var options=$.extend({},{openButton:"modalPopLite-open-btn",closeButton:"modalPopLite-close-btn",isModal:false,openCallback:null,closeCallback:null},settings);return this.each(function(){popID++;var thisPopID=popID,isOpen=false,obj=$(this),openObj=options.openButton,closeObj=options.closeButton,isReallyModel=options.isModal,openCallback=options.openCallback,closeCallback=options.closeCallback,resizeBox=function(){var winW=$(window).width(),winH=$(window).height(),objW=$(".modalPopLite-child-"+thisPopID).outerWidth(),objH=$(".modalPopLite-child-"+thisPopID).outerHeight(),left=winW/2-objW/2,top=winH/2-objH/2;$(modalPopLite_wrapper+thisPopID).css({left:left+"px",top:top});$(modalPopLite_mask+thisPopID).css("height",winH+"px")},openPopLiteModal=function(){resizeBox();$(modalPopLite_mask+thisPopID).fadeTo("slow",.6);$(modalPopLite_wrapper+thisPopID).fadeIn("slow");isOpen=true;if(typeof openCallback==="function"){openCallback.call(this)}},closePopLiteModal=function(){$(modalPopLite_mask+thisPopID).hide();$(modalPopLite_wrapper+thisPopID).css("left","-10000px");isOpen=false;if(typeof closeCallback==="function"){closeCallback.call(this)}};obj.before('
');obj.wrap('
');obj.addClass("modalPopLite-child-"+thisPopID);if($.isArray(openObj)){for(var i=0,len=openObj.length;i