Popup
HTML Popup
Use widgets -dropdown
or -tooltip
To set animation to the dialog window add animation name: -fadein--
, -fall--
, -fliphorizontal--
, -flopvertical--
, -slidein--
, -scalein--
, -newspaper--
.
HTML Button
Add data attributes to any widget data-toggle="popup"
and data-target="#popup1"
. The plugin will find such buttons automatically. In data-target
you can set classes or ids.
Coffescript
Simple way:
el.popup()
More complicated:
el.popup beforeactive: -> # Get popup class instance popup = @data['kitPopup'] # Set new content popup.dialog.innerHTML = "Set content here" onactive: -> # Add active class to the button @_addClass '_active_' ondeactive: -> # Remove active class to the button @_removeClass '_active_'
Open popup Open popup ...
Flip horizontal popup...Fall popup
document.querySelector('.btn-popup-demo').popup beforeactive: -> popup = @data['kitPopup'] popup.dialog.innerHTML = "Popup #{popup._id} with dynamic content
Random number #{Math.random()}" onactive: -> @_addClass '_active_' ondeactive: -> @_removeClass '_active_' document.querySelector('.btn-popup-demo-left').popup position: vertical: 'middle' horizontal: 'left' beforeactive: -> popup = @data['kitPopup'] popup.dialog.innerHTML = "Popup #{popup._id} with dynamic content
Random number #{Math.random()}" onactive: -> @_addClass '_active_' ondeactive: -> @_removeClass '_active_' ...
Properties
Name | Default | Description |
---|---|---|
target | @el.getAttribute( 'data-target' ) or null | Find element with this selector and work with it as a popup window. |
toggle | @el.getAttribute( 'data-toggle' ) or 'popup' | Set toggle type. |
dialog | @el.getAttribute( 'data-dialog' ) or ".-content" | Selector to find dialog blog inside popup. |
event | @el.getAttribute( 'data-event' ) or "click" | This event will be used to open popup. |
eventClose | @el.getAttribute( 'data-event-close' ) or "click" |
Event for closer element to close popup. Closer element should be anywhere in the DOM with attribute data-dismiss="target-selector" .
|
autoOpen | @el.getAttribute('data-autoopen') or no | Open popup after initialization. |
position | { vertical: @el.getAttribute( 'data-position-vertical' ) or 'top', horizontal: @el.getAttribute( 'data-position-horizontal' ) or 'center' } |
Popup position relative to the button. vertical: 'top' / 'middle' / 'bottom' horizontal: 'left' / 'center' / 'right'
|
offset |
horizontal: @el.getAttribute( 'data-offset-horizontal' ) or 0 vertical: @el.getAttribute( 'data-offset-vertical' ) or 0 |
In px . Offset relative to position .
|
closeUnfocus | @el.getAttribute( 'data-close-unfocus' ) or no | Close popup if click outside of it. |
closeOnResize | @el.getAttribute( 'data-close-resize' ) or yes | Close popup when browser window resizing. |
selfish | @el.getAttribute( 'data-selfish' ) or yes | Close all popups when opens this one. |
Methods
Method | Description |
---|---|
open |
Open popup. |
close |
Close popup. |
enable |
Start listening to the events. |
disable |
Stop listening to the events. Popup will stay in current status (opened or closed) and will not work anymore. |
setPosition |
Refresh position of the popup relative to the button. |
Events
Inside each method to get button use@
orthis
in js. Class instance always stores in data attribute of the button element@data['kitPopup']
orthis.data['kitPopup']
in js. To get popup window element do@data['kitPopup'].target
.
Method | Description | |
---|---|---|
beforeactive | undefined |
Set a function to call it before popup opens. If it returns document.querySelector('.btn-popup').popup beforeactive: -> d = $.Deferred() console.log @ # The button element will be in the log # so you can add or remove classes easily # for example to disable button while getting data for popup window console.log @data['kitPopup'] # The instance of Modal class will in log # so to get popup window element you need to do popup = @data['kitPopup'].target # To get popup element do console.log popup.target # To get popup dialog element do console.log popup.dialog # Do something here before open window # in this case it will open popup window after 2 seconds setTimeout -> d.resolve() , 2000 # End of your code d.promise() |
onactive |
Set a function to call it after popup opens. |
|
failactive |
Set a function to call it if activation failed. |
|
beforedeactive |
Call this function before popup closes. |
|
ondeactive |
Call this function after popup closes. |
|
faildeactive |
Set a function to call it if deactivation failed. |