I like using Zurb’s fantastic Foundation framework. I’ve been using it heavily over the last year for many projects.
One of my favourite parts is their Reveal modal box. It’s fast, responsive and looks pretty slick. However, in versions prior to the latest version 5, it doesn’t play nicely with WordPress, if you want to add a modal box inline in your content it falls over.
In Foundation versions 3 & 4, Reveal modal content needs to be placed before the closing
</body> tag, else your modal box ends up displaying in some pretty awkward places. Not so slick.
I couldn’t find any plugins at the time to handle this functionality so I wrote a simple one to allow myself and my team to quickly and simply add modal box content in the WordPress editor using shortcodes. This prevented us having to spend time handling copy and allow editors to edit their modal box content within WordPress. It also prevents delineating otherwise well written copy.
[reveal id=”example” link=”Here’s a working example” ]
Highlight the text your’d like to place in your modal box.
Click the reveal icon in your editor toolbar.
Enter a unique ID for the Reveal.
Optionally enter some link text to replace the modal content, or manually place it wherever you like in your content.
<a href="#" data-reveal-id="yourUniqueId" data-reveal>Link Text</a>
You can also manually create a modal box like this.
Your content goes here
See my amazing modal box content by <a href="#" title="reveal-example">clicking me</a>.
The plugin can be found on my GitHub account. If anyone has any suggestions for improvements please let me know or make some pull requests.
Edit: I’ve now added a simple editor plugin for TinyMCE to make it extra easy to drop in the shortcode to your editor.