Skip to content

Added some variase flexibilities #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
razmig wants to merge 12 commits into
base: master
Choose a base branch
from
Open

Added some variase flexibilities #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
e8960b6
cleanup the code, add possible array of open and array of close butto…
razmig Feb 12, 2014
9b61a11
delete index page
razmig Feb 12, 2014
38d2dc3
Update modalPopLite.js
razmig Feb 13, 2014
395fd55
fix some bugs and add possible array of open and close buttons
razmig Feb 18, 2014
f3a7f73
minify
razmig Feb 18, 2014
50a1cb1
update version, remove gif and update readme file
razmig Feb 18, 2014
e5ddfc0
rename readme file
razmig Feb 18, 2014
84a1c3a
update readme
razmig Feb 18, 2014
44a8210
update readme
razmig Feb 18, 2014
31e184e
fix callback bug
razmig Feb 18, 2014
e6c2bf8
update min file
razmig Feb 18, 2014
d1779b3
bind events to dynamically loaded elements
razmig Feb 20, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 55 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
----------------------

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="modalPopLite.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="modalPopLite.min.js"></script>


Step 2: Create the page with an element to click and open the popup and a close button.
----------------------------------------------------------------------------------------

<div id="clicker">Click Me!</div>
<div id="popup-wrapper" style="background-color: #ccc;">I am a popup box. Content can be anything.
<a id="close-btn" href="#">Close</a></div>

Step 3: Attach the popup to a container on the page.
----------------------------------------------------

<script type="text/javascript">
$(function () {
$('#popup-wrapper').modalPopLite({
openButton: '#clicker',
closeButton: '#close-btn'
});
});
</script>
6 changes: 0 additions & 6 deletions README.txt
View file
Open in desktop

This file was deleted.

Binary file removed ajax-loader.gif
View file
Open in desktop
Binary file not shown.
72 changes: 72 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>A Simple Lightweight jQuery Modal Popup Box.</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link href="modalPopLite.css" rel="stylesheet" type="text/css" />
<script src="modalPopLite.js" type="text/javascript"></script>

<style type="text/css">
/* CSS Reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
margin:0;
padding:0;
font-family: Verdana, Arial, "Lucida Grande", sans-serif;
}
#clicker
{
font-size:20px;
cursor:pointer;
}
#popup-wrapper
{
width:500px;
height:300px;
background-color:#ccc;
padding:10px;

}
body
{
padding:10px;
}
</style>

<script type="text/javascript">
$(function () {

$('#popup-wrapper').modalPopLite({
openButton: ['#clicker','#clicker2','#clicker3'],
closeButton: ['#close-btn','#close-btn2', '#close-btn3'],
isModal: true
});

// $('#popup-wrapper').trigger("openPopLiteModal");
});
</script>
</head>
<body>
A Simple Lightweight Modal Popup Box.<br />
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).
<br /><br />

<div id="clicker">
Click Me!
</div>
<div id="clicker2">
Click Me!
</div>
<div id="clicker3">
Click Me!
</div>

<div id="popup-wrapper">
I am a popup box. Content can be anything. <br />
<a href="#" id="close-btn">Close</a>
<a href="#" id="close-btn2">Close</a>
<a href="#" id="close-btn3">Close</a>
</div>
</body>
</html>
170 changes: 97 additions & 73 deletions modalPopLite.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -13,115 +13,139 @@

* 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.
* 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('<div id="modalPopLite-mask' + thisPopID + '" style="width:100%" class="modalPopLite-mask" />');
obj.wrap('<div id="modalPopLite-wrapper' + thisPopID + '" style="left: -10000px;" class="modalPopLite-wrapper" />');
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 () {
$('<div class="popBox-ajax-progress"></div>').appendTo("body")
};

$.fn.modalPopLite.HideProgress = function () {
$('.popBox-ajax-progress').remove();
};

})(jQuery);
})(jQuery, window);
34 changes: 33 additions & 1 deletion modalPopLite.min.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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('<div id="modalPopLite-mask'+r+'" style="width:100%" class="modalPopLite-mask" />');s.wrap('<div id="modalPopLite-wrapper'+r+'" style="left: -10000px;" class="modalPopLite-wrapper" />');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('<div class="popBox-ajax-progress"></div>').appendTo("body")};e.fn.modalPopLite.HideProgress=function(){e(".popBox-ajax-progress").remove()}})(jQuery)
/*
* 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('<div id="modalPopLite-mask'+thisPopID+'" style="width:100%" class="modalPopLite-mask" />');obj.wrap('<div id="modalPopLite-wrapper'+thisPopID+'" style="left: -10000px;" class="modalPopLite-wrapper" />');obj.addClass("modalPopLite-child-"+thisPopID);if($.isArray(openObj)){for(var i=0,len=openObj.length;i<len;i++){$(openObj[i]).on("click",function(e){e.preventDefault();openPopLiteModal()})}}else{$(openObj).on("click",function(e){e.preventDefault();openPopLiteModal()})}if($.isArray(closeObj)){for(var v=0,closeLen=closeObj.length;v<closeLen;v++){$(closeObj[v]).on("click",function(e){e.preventDefault();closePopLiteModal()})}}else{$(closeObj).on("click",function(e){e.preventDefault();closePopLiteModal()})}obj.bind("openPopLiteModal",function(){openPopLiteModal()});obj.bind("closePopLiteModal",function(){closePopLiteModal()});if(!isReallyModel){$(modalPopLite_mask+thisPopID).click(function(e){e.preventDefault();$(this).hide();closePopLiteModal()})}$(window).resize(function(){if(isOpen){resizeBox()}})})}})(jQuery,window);