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
- 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
- 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
- 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
This stack is based on Andrey Pokrovskiy’s Shattering popup script
Please use this form
to report all issues, questions and comments.
This stack requires the Stacks plugin by YourHead
(version 3 or higher).