Snippets/Modals in Mediawiki

Description
First, in case you don't know what Modal is, here's Wikipedia's Answer:

In user interface design, a modal window is a child window that requires users to interact with it before they can return to operating the parent application, thus preventing the workflow on the application main window. Modal windows are often called heavy windows or modal dialogs because the window is often used to display a dialog box.

Modal windows are commonly used in GUI systems to command user awareness and to display emergency states, although they have been argued to be ineffective for that use.[1] Modal windows are prone to produce mode errors.

On the Web, they are often used to show images in detail, in a pattern known as a Lightbox.[2][3] -- From https://en.wikipedia.org/wiki/Modal_window

Modals are also great for drawing attention to content, a message, or something else.

This modal code below is pure CSS, which makes it a little easier to use inside a Mediawiki. Will not work with browsers from the beginning of time (ie8 & down).

Visual Example
Page before pressing the modal button.(I tested this inside the Foreground skin, which allows buttons inside the wiki syntax, but it will also work without a button)

Showing the Modal hanging above the page.

Usage
To use a modal you need the "a", the anchor html tag, which can be used via Extension:HTML Tags, without allowing the use of raw html. The example below shows the use of HTML Tags extension, if you have raw html, or have some other way to use the "a" tag change it. The anchor references the div, which is assigned the class of modalDialog. Inside that div you have a div to close the modal and another div, which the content will be between (I've the styled the div with max-height and set the overflow to auto, which causes a scrollbar to appear if the content is longer then the height.)

'''Turns out I was wrong -- You can use this modal without allowing the anchor html tag. Just use normal Mediawiki Section Linking (See Example 3)'''

The code below for images sets them at 100% of the div. Remove that part if you don't images styled in that way. Example 1:(shows a gallery & video inside the modal. Video code from the Extension:WidgetsFramework.) Modal Name

X

Example of a Modal

Example 2: Modal Name

X Your content here!!! Example 3:(needs one div with normal Mediawiki syntax to close it)

displayed text X Your content here!!!

Code
Modal for Mediawiki Code from:http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/

Sites that are or will be using this CSS
(Please list yourself)

Yellpedia