Snippets/Modals in Mediawiki
 | This page is obsolete. It is being retained for archival purposes. It may document extensions or features that are obsolete and/or no longer supported. Do not rely on the information here being up-to-date. |
 | |
|---|---|
| Language(s): | CSS |
| Compatible with: | MediaWiki 1.22+ (all) |
Description
[edit]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
[edit]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
[edit]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.)
<htmltag tagname="a" href="#nameyoupickhere">Modal Name</htmltag>
<div id="nameyoupickhere" class="modalDialog">
<div>
<htmltag tagname="a" href="#close2" title="Close" class="close">X</htmltag>
<div style="max-height:500px;overflow:auto;">
<gallery mode="packed-hover">
Image:Astronotus_ocellatus.jpg|''[[commons:Astronotus ocellatus|Astronotus ocellatus]]'' (Oscar)
Image:Salmonlarvakils.jpg|''[[commons:Salmo salar|Salmo salar]]'' (Salmon Larva)
Image:Georgia Aquarium - Giant Grouper.jpg|''[[commons:Epinephelus lanceolatus|Epinephelus lanceolatus]]'' (Giant grouper)
Image:Pterois volitans Manado-e.jpg|''[[commons:Pterois volitans|Pterois volitans]]'' (Red Lionfish)
Image:Macropodus opercularis - front (aka).jpg|''[[commons:Macropodus opercularis|Macropodus opercularis]]'' (Paradise fish)
Image:Canthigaster valentini 1.jpg|''[[commons:Canthigaster valentini|Canthigaster valentini]]'' (Valentinni's sharpnose puffer)
Image:Flughahn.jpg|[[Image:POTY ribbon 2007.svg|25px]] ''[[commons:Dactylopterus volitans|Dactylopterus volitans]]'' (Flying gurnard)
Image:Fishmarket 01.jpg|''[[commons:Semicossyphus pulcher|Semicossyphus pulcher]]'' (California Sheephead)
Image:Pseudorasbora parva(edited version).jpg|''[[commons:Category:Pseudorasbora parva|Pseudorasbora parva]]'' (Topmouth gudgeon)
Image:MC Rotfeuerfisch.jpg|''[[commons:Category:Pterois antennata|Pterois antennata]]'' (Antennata Lionfish)
Image:Cleaning station konan.jpg|''[[commons:Novaculichthys taeniourus|Novaculichthys taeniourus]]''
Image:Synchiropus splendidus 2 Luc Viatour.jpg|''[[commons:Synchiropus splendidus|Synchiropus splendidus]]'' (Mandarin fish)
File:Psetta maxima Luc Viatour.jpg|''[[commons:Psetta maxima|Psetta maxima]]'' (Turbot)
File:Australian blenny.jpg|''[[commons:Category:Ecsenius|Ecsenius axelrodi]]''
</gallery>
Example of a Modal
{{YouTube:id=WlMIe-vA2aw}}
</div>
</div>
</div>
Example 2:
<htmltag tagname="a" href="#nameyoupickhere">Modal Name</htmltag>
<div id="nameyoupickhere" class="modalDialog">
<div>
<htmltag tagname="a" href="#close2" title="Close" class="close">X</htmltag>
<div style="max-height:500px;overflow:auto;">
Your content here!!!
</div>
</div>
</div>
Example 3:(needs one div with normal Mediawiki syntax to close it)
[[#nameyoupickhere|displayed text]]
<div id="nameyoupickhere" class="modalDialog">
<div>
<div class="close">[[#close2|X]]</div>
<div style="max-height:500px;overflow:auto;">
Your content here!!!
</div>
</div>
</div>
Code
[edit]Modal for Mediawiki Code from:http://www.webdesignerdepot.com/2012/10/creating-a-modal-window-with-html5-and-css3/
/* CSS Modal for Mediawiki
*
* @author: Keenan Payne
* current version crafted together by [[User:Christharp]].
* Added scroll bar for inside div and changed some elements for better viewing inside a Mediawiki.
*/
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
transition: opacity 400ms ease-in;
pointer-events: none;
}
.modalDialog:target {
opacity:1;
pointer-events: auto;
}
.modalDialog > div {
position: relative;
width: 50%;
height:auto;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: linear-gradient(#fff, #999);
}
.modalDialog img {
width:100%;
height:auto;
}
.close {
background: #606061;
color: #fff;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
border-radius: 12px;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}