Adding joomla native modal to frontend

Feeling bad any how and started to write a blog if that makes me smile

….Hei ‘time‘ I am too emotional … I can kill you if u make me sad again and again !

Any one regular reader of my blog can remember I developed a joomla module Simple tabslider for joomla1.5 (joomla extension link, my blog post Home made tab and slider module for joomla1.5). I developed it using the joomla native tab slider html helper that is known is JPane. Joomla has a great library for html …. check joomla dir libraries\joomla\html (windows style dir …. I like to use windows all time).

Ok if you are familiar with joomla then if you are in admin panel and in just article manager then you should see a button in right side named “Parameter”. Click that parameter… what do u see ? a popup box right. it’s a modal window, joomla native modal or popup window. Did u think which javascript is used to make this … let me tell you if you don’t …. go to media\system\js and see there is js file named “modal.js” 🙂

So let’s try to use that modal window in front end ?

Open index.php file of your joomla template and put these two line

<?php JHTML::_('behavior.mootools'); JHTML::_('behavior.modal'); ?>


Now the syntax is like bellow … in any content link any thing like bellow

<a rel="{handler: 'iframe', size: {x: 700, y: 400}}" class="modal" href="">click me</a>

so what u have to put is a class name “modal“, in a rel tag handler and window size

handler iframe, images etc .. and size is window size (width and height) in the anchor tag url put what u want to load url(link), iframe or image etc.

This is just a simple example how we are can load external site in a modal window … using joomla native modal , using joomla html helper.

this is how we can load image in iframe

<a rel="{handler: 'iframe', size: {x: 540, y: 400}}" class="modal" href="images/joomla_logo_black.jpg">click me</a>

Ok now let’s change the handler to image and put this code, see the modal window is now as the image size 🙂

<a rel="{handler: 'image', size: {x: 540, y: 400}}" class="modal" href="images/joomla_logo_black.jpg">click me</a>

try more and let me us know.

5 responses on “Adding joomla native modal to frontend

  1. blackbirdsr81

    Well this tutorial seems incomplete. What next after poping up the modal window? What about if you want to post a form from the modal window or post back the contents onto the parent window. Any ideas??

  2. DesignSubway

    Thanks for the info. Do you know of a way to add a gallery option to the ‘rel’ attribute? So that the modal box will have left and right arrows to scroll through all of the pictures in that gallery.

  3. nastaran zanjani

    Hi I followed the above instruction. but when I wrote

    " < a rel= "{handler: ' iframe, size: (x:700 , y:400}}" class="modal" href=""&quot;

    in the content of my article what I get in the front-end of my site is not a modal window it just write the following code in the article front-end

Leave a Reply

Your email address will not be published. Required fields are marked *