A base class for your Backbone js views which provides a showModal() method.
[See the demo page live in action on www.garethelms.org] (http://www.garethelms.org/demo/backbone-js-modal-dialog/demo.html)
Include Backbone.ModalDialog.js in your html page. Make your Backbone view extend ModalView. Now you can call myView.render().showModal().
For example, let's create a view we want to appear in a modal dialog :
AddPersonView = ModalView.extend( {
name: "AddPersonView",
model: PersonModel,
templateHtml:
"<div class='modal-header'>Add a new person to the list</div>" +
"<form>" +
etc...At this point you don't have to use your view as a modal dialog, it's still a normal view as far as Backbone is concerned (ModalView extends Backbone.View) but now your view has the showModal() method available. You call it like this :
var view = new AddPersonView();
view.render().showModal();You can pass an options hash into showModal(). Here's an example with all the default options that are assumed if you don't pass any options in at all :
view.render().showModal({
x: null,
y: null,
fadeInDuration:150,
fadeOutDuration:150,
showCloseButton:true,
bodyOverflowHidden:false,
setFocusOnFirstFormControl:true,
targetContainer: document.body,
slideFromAbove: false,
slideFromBelow: false,
slideDistance: 150,
closeImageUrl: "/resources/shared/images/close-modal.png",
closeImageHoverUrl: "/resources/shared/images/close-modal-hover.png",
css:
{
"border": "2px solid #111",
"background-color": "#fff",
"-webkit-box-shadow": "0px 0px 15px 4px rgba(0, 0, 0, 0.5)",
"-moz-box-shadow": "0px 0px 15px 4px rgba(0, 0, 0, 0.5)",
"box-shadow": "0px 0px 15px 4px rgba(0, 0, 0, 0.5)",
"-webkit-border-radius": "10px",
"-moz-border-radius": "10px",
"border-radius": "10px"
}});The default x is calculated to be the centre of the visible screen. You can override this with your own x value or by using css.left or css.right.
The default y is calculated to be the centre of the visible screen. You can override this with your own y value or by using css.top or css.bottom.
How long in miliseconds it takes for the modal dialog to fade into view.
How long in miliseconds it takes for the modal dialog to fade to nothing when closed.
The close button (see closeImageUrl) appear in the top right giving the user a traditional method of closing the dialog. Clicking outside of the dialog will also close it.
This is false by default. If this is true then the scroll bar is disabled and user won't be able to scroll the dialog out of view.
The first form control will automatically be given focus.
By default the modal dialog is appended to document.body and can be positioned absolutely (relative to document body) using the x and/or y options or the top/left/right/bottom css options. If you want to position the dialog relative to a container element then pass in the jquery object here. See the "Anchored to header (left)" example on the [demo page] (https://github.com/GarethElms/BackboneJSModalView/blob/master/demo.html).
To have the dialog slide down from above set this to true.
To have the dialog slide up from below set this to true.
If you are using the slideFromAbove or slideFromBelow options then this is the number of pixels length of the slide.
The url for the close icon.
The url for the close icon on hover.
You can pass in any css you want to be applied to the modal dialog. See the [jQuery .css() docs] (http://api.jquery.com/css)
Boolean; default is true. Determines whether the modal dialog is displayed so it is visible in a scrolled viewport (a sensible default), or is displayed at the top of the document where it might be invisible if the window has been scrolled down.
Boolean; default is false. This prevents the modal from being closed, effectively blocking the ui permanently. The same as setting backgroundClickClosesModal, pressingEscapeClosesModal and showCloseButton to false.
Boolean; default is true. Clicking in the background outside of the modal will close the modal by default.
Boolean; default is true. Pressing the escape button will close the modal by default.