Popup maxmertkit.popup.js
$.Deferred for changing the content of a popup or performing some other operations.
Also it remembers all popups instances and is able to manipulate them, for example to close all other popups except for the currently open one.Deferred
You can use$.ajax or $.get as beforeOpen and beforeClose functions, and use recieved data as popup's content or just to check something.
Let us see how $.Deferred works.Let us do the same, but with some emulated errors while getting data before opening.
Add $.notify() to add notification centre.
This plugin also may be used for tooltips
Inform me
- console
Usage
Let us show tooltip. We will need tooltip template, some javascript code and some content to show (for example text "Some information").Javascript
$('.js-tooltip').popup({
trigger: 'click',
animation: 'easeOutElastic',
animationDuration: 400,
template: '#tooltip-template',
content: 'Some information'
placement: 'top',
onlyOne: true
});Template
<div id="tooltip-template"><div class="-tooltip"><i class="-arrow"></i><div class="js-content"></div></div></div>
Button
<a class="-btn js-tooltip">Inform me</a>
All content will show inside .js-content. If property content is not set, then plugin will search information within data-content="Some information"
Options
| Name | Type | Default | Description |
|---|---|---|---|
| enabled | boolean | true | Enable or disable current instance of popup. |
| animation | string | null | Name of animation. Css animations: |
| animationDuration | number | 0 | In ms Duration of the animation. It works just for javascript animations. |
| theme | string | 'dark' | Name of the theme from maxmertkit framework. |
| placement | string | 'top' | Where to put popup instead of element. Can be 'top', 'bottom','left', 'right' |
| offset | array | [0, 0] | In px Offset from top left position of popup (from place where it appears) Example: [0, 10] – x-offset = 0, y-offset = 10px |
| autoOpen | boolean | false | Open popup after initialization |
| template | string | '<div class="js-content"></div>' | Template of the popup. It understands selectors or html text. Example: |
| onlyOne | boolean | false | Close all other instanses of popup when current instance opens. All instanses are stored in global scope $.popups |
| content | string | null | Text to set inside .js-content in popup. If null then look for content inside data-content='' of button (or element which trigered opening). If it have not been found, then do nothing. |
| header | string | null | Text to set inside .js-header in popup. If null then look for content inside data-header='' of button (or element which trigered opening). If it have not been found, then do nothing. |
| trigger | string | click | Action to show popup. Through comma. Example: |
| delay | number | 0 | In ms Delay before show popup (if you use { trigger: 'hover' } and do not want to show popup immediately after hover) |
Methods
Remember, that you do not need to call any methods to change theme, animation or anything else. All you need to do is change property, plugin will do the rest.
| Name | Description |
|---|---|
| init | Init current popup instance. |
| open | Open current popup instance. |
| close | Close current popup instance. |
Callbacks
| Name | Type | Default | Description |
|---|---|---|---|
| beforeOpen | function | $.noop() | Execute function before opening. Understands $.Deferred, including $.ajax() and $.get()$('.js-tooltip').popup({
trigger: 'click',
template: '#tooltip-template',
content: 'Some information'
placement: 'top',
onlyOne: true,
beforeOpen: function() {
var d = $.Deferred();
if( someData = 0 )
d.resolve()
else
d.reject()
d.promise();
}
});In this example you can get |
| open | function | $.noop() | Triger after popup opened. |
| ifOpenedOrNot | function | $.noop() | Triger after popup opened or just tried to open but failed. Useful to remove loading status or something like that. |
| ifNotOpened | function | $.noop() | Triger only if popup failed to open. Useful if you want to inform user about fail. |
| beforeClose | function | $.noop() | Execute function before popup close. Understands $.Deferred, including $.ajax() and $.get()$('.js-tooltip').popup({
trigger: 'click',
template: '#tooltip-template',
content: 'Some information'
placement: 'top',
onlyOne: true,
beforeClose: function() {
var d = $.Deferred();
if( someData = 0 )
d.resolve()
else
d.reject()
d.promise();
}
});In this example you can get |
| close | function | $.noop() | Triger after popup closed. |
| ifClosedOrNot | function | $.noop() | Triger after popup closed or just tried to close but failed. Useful to remove loading status or something like that. |
| ifNotClosed | function | $.noop() | Triger only if popup failed to close. Useful if you want to inform user about fail or when he forgot to perform some operations inside popup. |
