I like what I see in the Humaan Modaal project. It provides a way of producing an accessible dialog window (or modal). The website says it is a WCAG 2.0 Level AA accessible modal window. I’ve used other modal’s for previous projects successfully, but I wanted to create a simple plugin I could easily add to any WordPress project.
Modaal requires a certain markup to produce it’s modaal. A WordPress shortcode would provide the easiest way of producing that code in a page or post with minimal effort by the writer.
The plugin we wrote is stored here at GitHub. Take a look at the README on usage and installation instructions. This post will demo some of the examples shown in the README.
Example 1 (Inline)
In this example, I also show how to change some of the inline configuration options by showing how to remove the ‘close’ button and change the background color. To close this modal just click anywhere outside of the modal
[modaal type=”inline” button_text=”Click Here” attribs=”hide-close:true,background:#229933″]
This is a test
[/modaal]
Example 2 (Image Gallery):
[modaal type=”image” button_text=”Click”]
[/modaal]
Example 3 (video):
[modaal type=”video” button_text=”Video” id=”testing3″]
[/modaal]
Example of modaal_link:
[modaal type=”image” button_text=”Click” id=”testing”]
[modaal_link][/modaal_link]
[/modaal]
During the development we discovered that we can us wp_register_script in the wp_enqueue_scripts hook but don’t have to actually have the script load in the page unless the shortcode is used. If there is a shortcode, our code is called during the loop (before the footer is outputted), so we can enqueue the script then. See this link for a better explanation. It would be great if we could use this same technique for the plugin’s css file, but it is stored in the head of the document so it’s already outputted by the time we get to our code. If anyone knows of a way to load this css only if the page contains the shortcode, leave a comment!
