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
HeaderCras 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.
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@
orthis
in js. Class instance always stores in data attribute of the button element@data['kitModal']
orthis.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 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
.
Header...Header...
modals = doument.querySelectorAll('.btn-modal-fast') for modal in modals modal.modal()
For the whole list of possible animations look at animations components.