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_'




...
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 @ or this in js. Class instance always stores in data attribute of the button element @data['kitPopup'] or this.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 deferred.promise(), then popup will not open till deferred.resolve(), and woun't open if deferred.reject(). You can just get data with ajax for popup.

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.