One of the most innovative features of this {tooltip | # | Joomla is an awesome content management system based on the gnu/gpl license | top | Joomla Template} is the possibility to include Modal Windows on every place where you want. Modals are made for show a Joomla Module in nice Lightbox. See the big feature list above.
{panel-white} {list | type3} {listing}{icon | fa-caret-right}Including is so easy and comfortable using our integrated shortcode system{/listing} {listing}{icon | fa-caret-right}It's possible to display up to 10 reveals on every page and link them internal{/listing} {listing}{icon | fa-caret-right}Reveal is no iframe it's inline content, so search engines will thank you{/listing} {listing}{icon | fa-caret-right}Of course the reveal modal is fully responsive and fits to all devices{/listing} {listing}{icon | fa-caret-right}Display nearly every Joomla Module in this reveal, for example a {link-data | modal1 | #modal1 | Login Module | data-toggle="modal"}{/listing} {/list} {/panel}{icon | fa-flask templatecolor}Demo
{row} {col6}
Modal as a Button click button
{button-data | btn-medium btn-primary | #modal1 | Open Login Module | data-toggle="modal"}
{button-data | btn-large btn-warning | #modal2 | Open Text Module | data-toggle="modal"}
{button-data | btn-xlarge btn-danger | #modal3 | Open Menu Module | data-toggle="modal"}
{/col} {col6}Modal as a Link click link
Fusce dapibus, tellus ac cursus commodo, {link-data | modal1 | #modal1 | open Content | data-toggle="modal"} condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, {link-data | modal2 | #modal2 | open Content Module | data-toggle="modal"} condimentum nibh, ut fermentum massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. {link-data | modal3 | #modal3 | open Menu Module | data-toggle="modal"} donec id elit non mi porta gravida at eget metus. Nulla vitae elit libero, a pharetra augue.
{/col} {/row}Modal as a Image click image
{row} {col4} {image-data | modal1 | #modal1 | images/sampledata/portfolio/Her_Hand_is_touching_her_Face.jpg | data-toggle="modal"} {/col} {col4} {image-data | modal2 | #modal2 | images/sampledata/portfolio/In_the_Jungle.jpg | data-toggle="modal"} {/col} {col4} {image-data | modal3 | #modal3 | images/sampledata/portfolio/Space_Tunnel_in_Ear.jpg | data-toggle="modal"} {/col} {/row}{icon | fa-question-circle templatecolor}How to use
You can use this Shortcodes everywhere in your content, click here to find out more.
{button-data | btn-large btn-info | #name-of-the-Moduleposition | Text for the Button | data-toggle="modal"}
{link-data | name-of-the-Moduleposition | #name-of-the-Moduleposition | Text for the Link | data-toggle="modal"}
{image-data | name-of-the-Moduleposition | #name-of-the-Moduleposition | /path-to-image.jpg | data-toggle="modal"}
Follow this instruction step-by-step to create your Modal:
{panel-white} {list | list-dot-dark} {listing}Add a new module (for example the custom html module){/listing} {listing}Place your text/content/shortcode/image inside the textfield{/listing} {listing}Give a module position like modal1{/listing} {listing}Made menu assignment to the page where to display{/listing} {listing}Save the module{/listing} {listing}Go to the page/module/area where to display and use one of the upper shortcodes{/listing} {/list} {/panel}Attention: It's really easy to use this reveal modal but some things keep in mind:
{panel-white}
{list | list-dot-dark}
{listing}Use one of the possible module positions modal1 - modal10{/listing}
{listing}Use Menu Assignment to display only on pages where you want to open the modal cause it loads otherwise on every page{/listing}
{listing}Don't use the Modal for display Maps, many Images or Videos, for this Case we have the Lightbox included{/listing}
{/list}
{/panel}
{toggle | Familiar with Basic HTML?}
Simple Button, opens Module Position in Modal Lightbox
<a href="#name-of-the-Moduleposition" data-toggle="modal" class="btn-large btn-info" title="Title here">Button Text here<a>
Simple Link with Icon, opens Module Position in Modal Lightbox
<a href="#name-of-the-Moduleposition" data-toggle="modal" title="Title here"><i class="icon-name"></i>Link Text here<a>
Simple Image, opens Module Position in Reveal Lightbox
<a href="#name-of-the-Moduleposition" data-toggle="modal" title="Title here"><img src="/your-image.jpg" alt="Alternative Text here" /><a>
You will see, simply add the HTML5 Tag data-toggle="modal" to your Syntax and link to the Moduleposition and the Content will open in a Modal Lightbox
{/toggle}