Backbone.ModalDialog.js v0.3

July 14th, 2012 by Gareth / Comments

Recently at work I gave my Backbone.js modal dialog a good run out on a fairly complex edit profile screen. Each distinct element of a user’s profile is editable separately in a modal dialog. I made a few changes along the way so now here’s the 0.3 release.

The changes in v0.3 are :

  • Added option showModalAtScrollPosition (default true) to determine 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.
  • Fixed a problem where the opaque blanket div didn’t cover the entire screen when the window was scrolled. The modal blanket div’s height is recalculated every time a dialog is displayed (in case the window height has changed since last time).
  • Added the recentre() function which you can call to recentre a modal dialog in case the content has changed. Useful if errors messages have been added for example. Americans can use recenter().
  • Improved how the positioning works.
  • The showModal() function now returns this.
  • Added validation to the demo using Thomas Pederson’s excellent backbone.validation.js.

See the demo page live in action.

Javascript, UI

My Micro-SAAS Journey

Get the inside story as I work out how to create a micro-SAAS