PaPopup
Give a try
open a popup close a popupPresentation
PaPopup is a plugin made purely in javascript to display and manage popups on multiple elements.
A JavaScript popup manager
- Lightweight
- No dependencies
- Display a single popup from multiple elements
The normal version of PaPopup does not require jQuery
Usage
Basic Usage
PaPopup can be bound to an html element or even several elements :
<div class="papopup">click me to open popup</div>
Add the JavaScript to the end of your document:
<script src="papopup.js"></script>
<script>
var pop = new PaPopup({
popElem: ".papopup",
popUrl: "http://pa-bru.fr"
});
</script>
On click on one the concerned html element the popup is opened.
Open popup after init on PaPopup
To prevent the default event behavior (which is onClick on a popElem) set openAuto to false !
=> you can trigger the opening of the window with pop.open()
var pop = new PaPopup({
openAuto: false, //you must create your own event handler to open the popup
popElem: ".papopup",
popUrl: "http://pa-bru.fr"
});
/*code*/
popElem.addEventListener("click", function(e){
e.preventDefault();
pop.open(); // now you open the popup
}, false);
Close a popup
<div class="openPop">click me to open popup</div>
<div class="closePop">click me to close popup</div>
<script>
var pop = new PaPopup({
openAuto: true,
popElem: ".openPop",
popUrl: "http://pa-bru.fr"
});
/*the popup is opened on click on elements having class openPop*/
var closePop = document.querySelectorAll(".closePop");
closePop.addEventListener("click", function(e){
e.preventDefault();
pop.close(); // close the popup
}, false);
</script>
Triggered events
- onOpen : you can call a function you want when the popup opens
var pop = new PaPopup({
popElem: ".papopup",
popUrl: "http://pa-bru.fr",
onOpen: function() {
console.log('run my onOpen callback function');
}
});
- onClose : you can call a function you want when the popup closes
var pop = new PaPopup({
popElem: ".papopup",
popUrl: "http://pa-bru.fr",
onClose: function() {
console.log('run my onClose callback function');
}
});
Setters
You can add/remove/change properties of the papopup object after the init !
- Define the position of the popup on the screen (more details in Properties topic)
pop.setPosition("a position");
- Define a custom position of the popup on the screen with pixels (more details in Properties topic)
pop.setCustomMargin(marginTop, marginLeft);
- Define the options of the window (more details in Properties topic)
pop.setPopOptions("options");
- Specify a callback function to call when the popup opens (more details in Properties topic)
pop.setOnOpen(callback);
- Specify a callback function to call when the popup closes (more details in Properties topic)
pop.setOnClose(callback);
Properties
-
popElem
: (default.papopup
) bind the popup to every selected element (eg:popElem: ".popups"
) -
popUrl
: URL of the new window to open in a popup -
position
: (defaultcenter
) The position of the popup on the screen- center
- top center
- top left
- top right
- bottom center
- bottom left
- bottom right
-
openAuto
: (defaulttrue
) Define or not the default event to open the popup (onclick) -
popName
: (defaultpapopup
) Specifies the name of the window -
marginTop
: (defaultnull
) Define the top position of the window- in pixels
- Override the
position
property - Negative values not allowed
- You must also set the
marginLeft
property
-
marginLeft
: (defaultnull
) Define the width of the window- in pixels
- Override the
position
property - Negative values not allowed
- You must also set the
marginTop
property
-
popHeight
: (default500
) Define the height of the window- Min. value is 100
-
popWidth
: (default500
) Define the height of the window- Min. value is 100
-
popOptions
: (defaultnull
) A comma-separated list of items (no whitespaces) defining the options of the window. eg:menubar=yes,status=no
-
menubar=yes|no|1|0
: Whether or not to display the menu bar -
status=yes|no|1|0
: Whether or not to add a status bar -
titlebar=yes|no|1|0
: Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box
-
-
onOpen
: (defaultnull
) A function you want to call when the popup opens. -
onClose
: (defaultnull
) A function you want to call when the popup closes.
Releases
v1.0 :
- Initial Version
Author
- Paul-Adrien Bru Linkedin
Copyright © 2016 Paul-Adrien Bru | MIT license