Stacks Image 100

ShatteringPopup Stack

show content in a popup that is shattered on closing

The ShatteringPopup Stack shows a popup on opening a page that will be ‘shattered’ when it is closed. This is a nice way to draw attention — and not only for a happy holidays message.

Demo
This page started with a ’shattering popup’. Reopen it.

Usage
  • Drag any content you want to show in a popup inside this stack, but keep it simple (text, an image…), but do not use links (except for closing the popup, see below).
  • Define the size of the popup by setting the size of the individual tiles and the number of tiles horizontally and vertically.
  • For best results, set the content of the popup size to a maximum of 320×320px. This way, the popup will always fit, even on a smartphone.
    Make sure the horizontal tile size is bigger than the border width!
    Don’t set both the horizontal values of the tile size and the number of tiles to an odd number.
  • To close the popup, select at least one of the four available options (click/tap overlay, click/tap popup, with escape key, click/tap custom element). The latter is for an element inside the popup and can be a link (with its URL to javascript:void(0)).
  • To reopen a closed popup (without reloading the page), add a selector (class, id) to any element on the page. When adding the selector to a link, set its URL to javascript:void(0). If you want more than one link, make sure to use a class, not an id! On this page, the selector is set to .reopen. This is a link with that class. See fig. 2 for an example.
  • The options involving custom elements are meant for advanced users only. Its use is not supported. Leave them unchecked if you don’t understand their meaning!

Need help using it on a non-stacks page? Here’s a tutorial.

Background
This stack is based on Andrey Pokrovskiy’s Shattering popup script.

Limitations
  • In Internet Explorer ≤ 10 or when JavaScript is disabled, this stack does not work.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3 or higher).
ShatteringPopup link
fig. 2
ShatteringPopup HUD
fig. 1
© 2012-2018 Marathia Web Design | Contact