Modals is a continuation and replacement of Modalizer.
Modals has been totally rewritten. It is more stable than Modalizer and has a lot more and different features and options.

Where Modalizer comes with multiple modal scripts, Modals utilizes only the Colorbox modal script (jQuery based).

Simple Modals

Syntax

{modal index.php/2-my-article}Internal url{/modal}
{modal http://digs.by/Z8cSEw}External url{/modal}

Title

{modal http://digs.by/Z8cSEw|title=That's my place :)}I've got a title{/modal}

Image

{modal images/fruit/bananas.jpg|Title=Totally bananas}Image{/modal}

Video

{modal http://www.youtube.com/embed/tENZDoj5MTg|width=560|height=315|title=Learn all about What? Nothing!}Youtube video{/modal}
{modal http://player.vimeo.com/video/32823876|width=500|height=409|Title=Whaah! That's me}Vimeo video{/modal}

Explanation

All you have to do to create a link is place the url inside the {modal} opening tag. Place the text of the 'link' you want people to click on between the {modal} opening and {/modal} closing tag.

{modal my/url}Click on me!{/modal}

You can add a title by adding a title attribute in the {modal} opening tag, like:

{modal my/url|title=The title for the modal}Click on me!{/modal}

Examples

Internal url

{modal index.php/2-my-article}Internal url{/modal}

External url

{modal http://digs.by/Z8cSEw}External url{/modal}

Title

I've got a title

{modal http://digs.by/Z8cSEw|title=That's my place :)}I've got a title{/modal}

Image

Image

modal images/fruit/bananas.jpg|Title=Totally bananas}Image{/modal}

Video

Youtube video

{modal http://www.youtube.com/embed/tENZDoj5MTg|width=560|height=315|title=Learn all about What? Nothing!}Youtube video{/modal}

Vimeo video

{modal http://player.vimeo.com/video/32823876|width=500|height=409|Title=Whaah! That's me}Vimeo video{/modal}

 

 

Width & Height

Syntax

{modal index.php/2-my-article|width=500|height=500}500 x 500px{/modal}
{modal index.php/2-my-article|width=60%|height=40%}60% x 40%{/modal}

Explanation

By default the modal window will auto size for internal urls and will open in the maximum size for external urls.

You can overrule the width and/or height by setting these to a fixed pixel or percentage value.

500 x 500px

{modal index.php/2-my-article|width=500|height=500}500 x 500px{/modal}

60% x 40%

{modal index.php/2-my-article|width=60%|height=40%}60% x 40%{/modal}

 

Galleries & Slideshows (pro only)

Result

Auto galleries

Custom link

Click here

Different first image

Show all thumbnails

Slideshow

Filtered

Custom images and thumbnails

Slideshow

Syntax

Auto galleries

{modal gallery=images/gallery}{/modal}

Custom link

{modal gallery=images/gallery}Click here{/modal}

Different first image

{modal gallery=images/gallery|first=bananas.jpg}{/modal}

Show all thumbnails

{modal gallery=images/gallery|showall=1}{/modal}

Slideshow

{modal gallery=images/gallery|slideshow=1}{/modal}

Filtered

{modal gallery=images/fruit|filter=_x\.}{/modal}

Custom images and thumbnails

{modal images/fruit/bananas_x.jpg|group=mygallery}{/modal} {modal images/fruit/limes_x.jpg|group=mygallery}{/modal} {modal images/fruit/strawberries_x.jpg|group=mygallery}{/modal}

Slideshow

{modal images/fruit/bananas_x.jpg|group=mygallery2|slideshow=1}{/modal} {modal images/fruit/limes_x.jpg|group=mygallery2|slideshow=1}{/modal} {modal images/fruit/strawberries_x.jpg|group=mygallery2|slideshow=1}{/modal}

Explanation

Auto galleries

You can very easily create a gallery by a single modal tag with a gallery attribute (which holds the folder containing of your images).

You can tell Modals to show special thumbnails images in your content, by adding image files that have the thumbnail suffix added to them (default: _t).
So the thumbnail for image apples.jpg should be apples_t.jpg.

{modal gallery=images/gallery}{/modal}

Custom link

If you place anything between the modal tags, that will be used as link to open the gallery. This can be text or an image or basically anything you want.

Click here

{modal gallery=images/gallery}Click here{/modal}

Different first image

The first image (thumbnail) in the folder will be shown in the content. If you want to show a different image instead, add a first attribute.

{modal gallery=images/gallery|first=bananas.jpg}{/modal}

Show all thumbnails

By default only the thumbnail of the first found image in the folder will show (you can change this default setting).
To make the thumbnails of all the images show,add showall=1 to the modal tag.

{modal gallery=images/gallery|showall=1}{/modal}

Slideshow

To create a slideshow, simply add slideshow=1 to the modal tag.

{modal gallery=images/gallery|slideshow=1}{/modal}

Filtered

You can overrule the default filter with your own. This example only shows images form folder images/fruit that end in _x (just before the file extension).

{modal gallery=images/fruit|filter=_x\.}{/modal}

Custom images and thumbnails

You might want to define your own specific images, because they are not in the same folder, or because you don't want all images in the folder to show.
To create a gallery with custom image paths, create a modal tag for every image and add a group attribute to the modal tags.

{modal images/fruit/bananas_x.jpg|group=mygallery}{/modal} {modal images/fruit/limes_x.jpg|group=mygallery}{/modal} {modal images/fruit/strawberries_x.jpg|group=mygallery}{/modal}

Slideshow

To create a slideshow on these custom galleries, you need to add slideshow=1 to every modal tag in the group.

{modal images/fruit/bananas_x.jpg|group=mygallery2|slideshow=1}{/modal} {modal images/fruit/limes_x.jpg|group=mygallery2|slideshow=1}{/modal} {modal images/fruit/strawberries_x.jpg|group=mygallery2|slideshow=1}{/modal}

 

Inline content (pro only)

Result

Content in tag

Show some inline text

Content in separate content tag

A lot more inline content

By using the modalcontent tags, you can place entire content blocks into the modal without the need of creating separate articles/urls.

You are also free to place fully whatever style and type of content you want in here:

Lorem Ipsum

applesPellentesque habitant morbi tristiquesenectus et netus et malesuadafames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
#header h1 a { 
	display: block; 
	width: 300px; 
	height: 80px; 
}

Syntax

Content in tag

{modal html=This text is entered right inside the modal tag.|title=Hello!}Show some inline text{/modal}

Content in separate content tag

{modal content=mycontent|title=Fully styled inline content}A lot more inline content{/modal}
{modalcontent mycontent}
... your fully styled content...
{/modalcontent}

Explanation

Content in tag

You can place content straight into the modal tag. This is great for when you don't want to create a separate article just for one link.

For short pieces of custom text you can use the html attribute:

Show some inline text

{modal html=This text is entered right inside the modal tag.|title=Hello!}Show some inline text{/modal}

Content in separate content tag

For larger content blocks pieces of custom text you can use the content attribute in combination with modalcontent tags

You can choose an alias for the modalcontent tag and you need to place that alias as value in for the content attribute.

A lot more inline content

{modal content=mycontent|title=Fully styled inline content}A lot more inline content{/modal}
{modalcontent mycontent}
... your fully styled content...
{/modalcontent}

 

Grouped mixed content (pro only)

Result

  1. Internal url
  2. External url
  3. Inline content
  4. Image
  5. Video

Syntax

{modal index.php/2-my-article|group=mygroup}Internal url{/modal}
{modal http://digs.by/Z8cSEw|group=mygroup}External url{/modal}
{modal html=This text is entered right inside the modal tag.|group=mygroup}Inline content{/modal}
{modal images/fruit/bananas.jpg|group=mygroup}Image{/modal}
{modal http://www.youtube.com/embed/tENZDoj5MTg?wmode=transparent|width=560|height=315|title=Learn all about What? Nothing!|group=mygroup}Video{/modal}

 

Open menu items in modals

To make a menu item open in a modal popup, simply surround the menu title in {modal} tags.

So if your menu item title is Click here!, change it to {modal}Click here!{/modal}.

You can also pass extra variables in the tag as described earlier, like: {modal title=My Page}Click here!{/modal} or {modal width=600|height=400}Click here!{/modal}.

If for some reason you don't want to use the {modal} tags (or it doesn't work), you can also give the menu item a custom classname (works with most menu modules) and set Modals up to convert by that classname.

 

Splash pages : Open modal on pageload (pro only)

To make modal popup on pageload, simply add the open=1 to the {modal} tag, like:

{modal my/url|open=1}...{/modal}

If you do not want to show the actual link to the page, then simply don't place any text between the {modal} tags, like:

{modal my/url|open=1}{/modal}

The syntax for modal popup you saw on page load of this page, looks like:

{modal html=Yes, you can also make modal popups show on page load!|title=Welcome to the Modals Demo|open=1}{/modal}

Show only once

To make a modal popup only show once per session, you can use openOnce=1, like:

{modal html=This modal will only show once|openOnce=1}{/modal}

Show on specific page loads

You can also tell Modals to show the modal on a specified range of session visits, using the openMin and openMax attributes. For instance, to show a modal on the second, third and fourth page load, you can do:

{modal html=This modal will only show once|openMin=2|openMax=4}{/modal}

This way you can have one modal for first page load, and another for the second.

 

Settings

These options that can be overrules inside the {modal} tag like you can see in above examples.

So the syntax for overruling settings in the {modal} tag is:

{modal my/url|setting_name=setting_value|setting_name=setting_value|etc}...{/modal}

The settings marked with a '*' can be set to a different default value in the Modals system plugin settings.

The Free version only allows these settings: url, title, width, height, iframe.

NameDefault valueDescription
url / href   The url or element to open in the modal. You do not have to use the setting name in the {modal} tag if the url is defined as first parameter. So these all work:
{modal my/url}...{/modal}
{modal url=my/url}...{/modal}
{modal href=my/url}...{/modal}
content   The id of the content (set by the {modalcontent} tag) to open in the modal:
{modal content=mycontent}...{/modal}
{modalcontent mycontent}This text appears inside the modal!{/modalcontent}
html   For displaying a string of HTML or text:
{modal html=This text appears inside the modal!}...{/modal}
title   This can be used as an anchor title alternative for the modal.
className   Adds a given class to the modal and the overlay.
iframe false If true, specifies that content should be displayed in an iFrame. For external urls this is automatically set to true.
photo false If true, this setting forces the modal to display a link as a photo. Use this when automatic photo detection fails (such as using a url like 'photo.php' instead of 'photo.jpg')
scrolling true If false, the modal will hide scrollbars for overflowing content. This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of the modal.
open true If true, the modal will immediately open on pageload.
transition * elastic The transition type. Can be set to "elastic", "fade", or "none".
speed * 350 Sets the speed of the fade and elastic transitions, in milliseconds.
scalePhotos * true If true, and if maxWidth, maxHeight, width, or height have been defined, the modal will scale photos to fit within the those values.
returnFocus * true If true, focus will be returned when the modal exits to the element it was launched from.
fastIframe * true If false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded.
opacity * 0.8 The overlay opacity level. Range: 0 to 1.
overlayClose * true If false, disables closing the modal by clicking on the background overlay.
escKey * true If false, will disable closing the modal on 'esc' key press.
arrowKey * true If false, will disable the left and right arrow keys from navigating between the items in a group.
Dimensions
width *   Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%).
height *   Set the fixed dimension. In pixels (ie 500) or percentage (ie 80%).
externalWidth *   Set the fixed dimension for external urls. In pixels (ie 500) or percentage (ie 80%).
externalHeight *   Set the fixed dimension for external urls. In pixels (ie 500) or percentage (ie 80%)./td>
initialWidth * 600 Set the initial dimension, prior to any content being loaded. In pixels (ie 500) or percentage (ie 80%).
initialHeight * 450 Set the initial dimension, prior to any content being loaded. In pixels (ie 500) or percentage (ie 80%).
maxWidth * 95% Set the maximum dimension for loaded content. In pixels (ie 500) or percentage (ie 80%). Set to 0 for no maximum.
maxHeight * 95% Set the maximum dimension for loaded content. In pixels (ie 500) or percentage (ie 80%). Set to 0 for no maximum.
Positioning
fixed * false If true, the modal will be displayed in a fixed position within the visitor's viewport. This is unlike the default absolute positioning relative to the document.
reposition * true Repositions the modal if the window's resize event is fired.
top *   Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's vertical positioning instead of using the default position of being centered in the viewport.
bottom *   Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's vertical positioning instead of using the default position of being centered in the viewport.
left *   Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's horizontal positioning instead of using the default position of being centered in the viewport.
right *   Accepts a pixel or percent value (50, "50px", "10%"). Controls the modal's horizontal positioning instead of using the default position of being centered in the viewport.
Groups / Slideshows
group / gallery   This allows the user to group any combination of elements together for a gallery.
preloading * true Allows for preloading of 'Next' and 'Previous' content in a group, after the current content has finished loading. Set to false to disable.
loop * true If false, will disable the ability to loop back to the beginning of the group when on the last element.
slideshow * false If true, adds an automatic slideshow to a content group / gallery.
slideshowSpeed * 2500 Sets the speed of the slideshow, in milliseconds.
slideshowAuto * true If true, the slideshow will automatically start to play.
Auto-Gallery
showall * false If selected, all thumbnails in the given gallery folder will be automatically shown.
thumbSuffix * _t The suffix to identify the thumbnail to show as the link. Example with default value '_t': if the main image is 'apple.jpg', then the thumbnail image is 'apple_t.jpg'.
thumbWidth *   Set the thumbnail dimension in pixels (ie 80). Leave empty to not force a specific size.
thumbHeight *   Set the thumbnail dimension in pixels (ie 80). Leave empty to not force a specific size.
separator * (space) Set the separator html for the images in the gallery. By default this is a space. Enter {none} to have no spacing between images.
filter * \.(png|jpg|gif|eps) The filter (Regular Expression) used to find the image files in the given gallery folder.
Retina Images
retinaImage * false If true, the modal will scale down the current photo to match the screen's pixel ratio
retinaUrl * false If true and the device has a high resolution display, the modal will replace the current photo's file extention with the retinaSuffix+extension
retinaSuffix * @2x.$1 If retinaUrl is true and the device has a high resolution display, the href value will have it's extention extended with this suffix. For example, the default value would change 'my-photo.jpg' to ''