PopupJS is a tool usefull to create popups windows easily.
It is possible to manipulate it's property to make :
- An information message
- A welcome window
- An annotation message on some element
- etc...
The PopupJS class act as a popup manager.
| Fonctions | Description | Parameters |
|---|---|---|
popupjs.create() |
Create a popup object and return it | options |
popupjs.getById() |
Return a popup object corresponding to the id passed in parameter | id |
popupjs.getAll() |
Return all existing popup objects in an Array | - |
popupjs.destroy() |
Delete the popup of the page and it's datas | id |
popupjs.clearAll() |
Delete all popups and datas | - |
popupjs.count() |
Return the number of created popups | - |
| Fonctions | Description |
|---|---|
mypopup.add() |
Add the popup to the page if not present |
mypopup.delete() |
Delete the popup of the page and it's datas |
mypopup.open() |
Open the popup |
mypopup.close() |
Close the popup |
mypopup.validate() |
Execute the buttonvalidate_callback function and close the popup |
mypopup.cancel() |
Execute the buttoncancel_callback function and close the popup |
mypopup.refresh() |
Update the visual part based on the current properties |
| Properties | Description | Type | Default |
|---|---|---|---|
id |
Popup identifier | {String} | "box-xxxxxxxxxxxx" |
width |
Popup width (px) | {Number} | 400 |
height |
Popup height (px) | {Number} | 150 |
radius |
Border radius of the popup window | {Number} | 10 |
shadow_show |
Show a shadow behind the popup window | {Boolean} | true |
color_main |
Main color of the popup (header & footer background) | {String} | "#888" |
color_secondary |
Secondary color of the popup (header & footer text) | {String} | "#FFF" |
draggable |
Allow to move the popup (grab it's header) | {Boolean} | false |
modal_show |
Display a drak background | {Boolean} | false |
modal_close |
Click on the dark background close the popup | {Boolean} | false |
position |
Position of the popup relative to the page (center | fullscreen | anchor | top | bottom | left | right | topleft | topright | bottomleft | bottomright) | {String} | "center" |
anchor_target |
Anchor element for the popup placement when position="anchor" |
{String} (js selector) | null |
anchor_side |
Popup placement side relative to the anchor element (auto | center | top | bottom | left | right | topleft | topright | bottomleft | bottomright) | {String} | "auto" |
title_show |
Show the popup title | {String} | true |
title_text |
Title text | {String} | "Title" |
content_text |
Content text | {String} | "Lorem ipsum..." |
buttonclose_show |
Display close button in the header | {Boolean} | true |
buttonvalidate_show |
Display Validate button in the footer (ferme le popup) | {Boolean} | false |
buttonvalidate_text |
Validate button text | {String} | "Ok" |
buttonvalidate_callback |
Validate button callback function | {String} | null |
buttoncancel_show |
Display Cancel button in the footer (ferme le popup) | {Boolean} | false |
buttoncancel_text |
Cancel button text | {String} | "Cancel" |
buttoncancel_callback |
Cancel button callback function | {String} | null |
- Instanciate the popup manager, the PopupJS class :
var popupjs = new PopupJS();- To create a popup object call the create() method of the PopupJS class :
var mypopup = popupjs.create();- Open the popup :
mypopup.open();var popupjs = new PopupJS();
var options = {
width: 350,
height: 200,
radius: 10,
shadow_show: true,
color_main: '#0AF',
color_secondary: '#FFF',
draggable: true,
modal_show: false,
modal_close: false,
position: 'center',
title_show: true,
title_text: 'Box 1',
buttonclose_show: true,
buttonvalidate_show: true,
buttonvalidate_text: 'Yes',
buttonvalidate_callback: function(){ console.log('Yes'); },
buttoncancel_show: true,
buttoncancel_text: 'No',
buttoncancel_callback: function(){ console.log('No'); },
}
var mypopup = popupjs.create(options);
mypopup.open();The popup properties can be modified after it's creation.
To apply the update call the refresh() function of the popup object.
mypopup.width = 300;
mypopup.height = 300;
mypopup.color_main = '#080';
mypopup.position = 'top';
mypopup.position = 'MyBox';
mypopup.buttoncancel_show = false;
mypopup.draggable = true;
mypopup.refresh();To create an annotation popup on an element :
- Do not display the header and footer (no button).
- Attatch your popup on an element
- Refresh the popup on each movement of the anchor element
var popupjs = new PopupJS();
var options = {
title_show: false,
buttonclose_show: false,
buttoncancel_show: false,
position: 'anchor',
anchor_target: '#anchor_element',
anchor_side: 'auto',
}
mypopup = popupjs.create(options);
mypopup.open();
window.addEventListener('resize', function(){
mypopup.refresh();
});
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent