Modal

HTML Modal

Use widget class -modal to add backdrop. Inside this backdrop add -holder to set dialog window in the center. Inside -holder add -dialog to create dialog window. Use -header, -content and -footer inside.

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="modal" and data-target="#modal1". The plugin will find such buttons automatically. In data-target you can set classes or ids.

Coffescript

Simple way:

el.modal()

More complicated:

el.modal
	target: '.modal123'
	toggle: 'modal'
	event: 'click'
	eventClose: 'click'
	backdrop: yes

Header

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Close

doument.querySelector('.btn-modal-fast').modal()
doument.querySelector('.btn-modal123').modal
	beforeactive: ->
		d = $.Deferred()

		setTimeout ->
			d.resolve()
		, 2000

		d.promise()

Properties

Name Default Description
toggle @el.getAttribute( 'data-toggle' ) or 'modal' Set toggle type.
target @el.getAttribute( 'data-target' ) or null Find element with this selector and work with it as a modal window.
dialog @el.getAttribute( 'data-dialog' ) or ".-dialog" Selector to find dialog block inside target (modal window).
event @el.getAttribute( 'data-event' ) or "click" This event will be used to open modal window.
eventClose @el.getAttribute( 'data-event-close' ) or "click" This event will be used to close window. Will listen on elements with data-dismiss=".modal" to close modal window with selector .modal.
backdrop @el.getAttribute('data-backdrop') or no Close modal window when clicked on the backdrop.
push @el.getAttribute('data-push') or no NOT TESTED. The selector of the container with WHOLE content, except modal window, to use push animation.
autoOpen @el.getAttribute('data-autoopen') or no Open modal after initialize.
selfish @el.getAttribute('data-selfish') or yes Close all Modal instances after current instance initialized.
hideScroll @el.getAttribute('data-hide-scroll') or yes Hide scroll of the container element when modal window appears.

Methods

Method Description
open

Open modal window.

close

Close modal window.

enable

Start listening to the events.

disable

Stop listening to the events. Modal window will stay in current status (opened or closed) and will not work anymore.

Events

Inside each method to get button use @ or this in js. Class instance always stores in data attribute of the button element @data['kitModal'] or this.data['kitModal'] in js. To get modal window element do @data['kitModal'].el.
Method Description
beforeactive

Set a function to call it before window opens. If it returns deferred.promise(), then modal window will not open till deferred.resolve(), and woun't open if deferred.reject(). You can just get data with ajax for modal window.

modals = document.querySelectorAll("[data-toggle='modal']")
for md in modals
	md.modal
		beforeopen: ->
			d = $.Deferred()

			console.log @
			# The button will be in the log
			# so you can add something like

			console.log @data['kitModal']
			# The instance of Modal class will in log
			# so to get modal window element you need to do
			modal = @data['kitModal']
			# From now you can access to the button by
			console.log modal.el
			# And to the modal window element by
			console.log modal.target

			# Do something here before open window
			# in this case it will open modal window after 2 seconds
			setTimeout ->
				d.resolve()
			, 2000
			# End of your code

			d.promise()

onactive

Set a function to call it after modal window opens.

failactive

Set a function to call it if activation failed.

beforedeactive

Call this function before modal window closes.

ondeactive

Call this function after modal window closes.

faildeactive

Set a function to call it if activation failed.

Animations

Use widget different animations. Add classes to the -dialog.





modals = doument.querySelectorAll('.btn-modal-fast')
for modal in modals
	modal.modal()
For the whole list of possible animations look at animations components.
Header

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Open popup

Close