Documentation

  1. Create a stack of the contents you want loaded into a modal window.
  2. Add this block to the page you want to have the modal window on, selecting the previously created stack
  3. Publish and enjoy.

It's easy to use a custom template to change the look of the overlay modal.  The modal uses bootstrap version 2, so you may reference the documents on github for assistance.

 

Developer notes:

Added in version 1.12.  Javascript now moves the "stack-modal" div to the end of the document (immediately before the closing body tag).  This should enhance compatibility with other themes and add-ons.  The link to open the stack modal is now contained in "stack-modal-link".

Added in version 1.1.  Added javascript to "move" iframes off-screen when the modal is active.  This is accomplished by setting the left margin of iframes to a negative number.  The margin is reset to zero when the modal closes.  If you are positing iframes with CSS then you may encounter shifting when the modal window used.

The div containing the modal window code has a z-index of 999, the backdrop has a z-index of 990, and the modal window has a z-index of 1050.  If you need to adjust these values, you may overwrite the bootstrap.min.css file by including your own view.css as a custom template.

Known issues:

In some cases, Iframe contents of modal window appear in upper left corner when zoom is adjusted in Google Chrome.  Unlikely to affect users.