Backbone.Modal.js removes boilerplate code and adds default behaviors and interactions. You can create a simple dialog modal or complex wizards with stacked modals on top of each other in a few lines of code.
Backbone.modal.js is built on top of Backbone.js. Make sure you include everything that's needed for Backbone and add Backbone.Modal.js and the CSS files to start playing with it. You can also start out with the examples.
If you'd like to create a stacked modal (multiple modals on top of each other), you'll need to use Backbone.Marionette.js and Backbone.Marionette.Modals.js.
Options can be added when extending from Backbone.Modal like: prefix
(for classnames), animate
and keyControl
(disable enter/esc events).
modal.views
You can bind your views by adding an event handler, just like you would define events in a Backbone.View. You can add additional options to pass along: view
(as Backbone.View, function or template which is required), viewOptions
(for specific options for that view). By using the onActive
callback, you can see whenever a view is active.
modal.views.length
Get the amount of views in a modal.
modal.template
You don't need the views
to create a modal, you can simply use a template if you just want to show one view. But if you want to create a complex modal, you can combine the template
and views
, but you'll have to define a viewContainer
.
modal.viewContainer
All views will be rendered within the viewContainer. Select a container from your template by doing: viewContainer: '.container'
modal.submitEl
You can define an element that will trigger all submit events. This will result in calling beforeSubmit
, submit
and closing the modal.
modal.cancelEl
Similar to submitEl
you can define an element that will cancel the modal. This will result in calling beforeCancel
, cancel
and closing the modal.
modal.openAt([index])
Open the modal at a specific index from views
.
modal.next()
Open the next view from views
. Useful when creating a wizard like modal.
modal.previous()
Similar to next()
, but will open the previous view from views
.
modal.onRender()
(callback)Useful when you want to do some custom work while it's rendering the modal.
modal.onShow()
Triggered whenever the animation has ended and the modal is displayed.
modal.beforeCancel()
(callback)This will be called when the user hits ESC, clicking on the cancelEl
or clicking outside the modal and before cancel
is called. It expects true
or false
.
modal.cancel()
This method is called when the user canceled the modal.
modal.beforeSubmit()
(callback)This will be called when the user hits ENTER or clicking on the submitEl
. It expects true
or false
, so you can do any validation for example.
modal.submit()
(callback)This method is called when the user submitted the modal.
modal.currentIndex
Returns the index of the current view that is visible.
modal.destroy()
Call this method to remove all events listerners, modal and internal views.
modal.onDestroy()
(callback)This method is called when the modal view is destroyed.
When you're using Marionette, you can set a Marionette.Region class as modal region: Backbone.Marionette.Modals
. When showing views in this region, it will behave like you would expect. Adding multiple modals, will result in stacked modals. You can close them individually, or all at once.
modals.show(modal)
Like you'd expect from a region, to render a view. When you already have a modal in there, it will animate differently and stack the modal.
modals.destroy()
This will destroy the last modal you have in the region.
modals.destroyAll()
Useful when you want to destroy all modals at once in this region.
modals.zIndex
This will let you know how many modals are stacked.
Single view/template
Single view/template (AMD)
Tab based
Stacked modal with Marionette
Stacked modal with Marionette (AMD)
Wizard
onShow
with Marionette was being called twicetemplate
nowanimate: false
in animateToView
modal:destroy
event on regionshowViewOnRender
: when set to false
it won't open the first view from render()
Backbone
and Backbone.Marionette
close
to destroy
)viewOptions
for views