in Joomla |

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

[code language=”php”]<?php JHTML::_(‘behavior.mootools’); JHTML::_(‘behavior.modal’); ?>[/code]

before

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

[code language=”html”]<a rel="{handler: ‘iframe’, size: {x: 700, y: 400}}" class="modal" href="http://google.com">click me</a>[/code]

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

[code language=”html”]<a rel="{handler: ‘iframe’, size: {x: 540, y: 400}}" class="modal" href="images/joomla_logo_black.jpg">click me</a>[/code]

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

[code language=”html”]<a rel="{handler: ‘image’, size: {x: 540, y: 400}}" class="modal" href="images/joomla_logo_black.jpg">click me</a>[/code]

try more and let me us know.

Published

Updated

  1. Hi,

    in my case if I put {handler: ‘iframe’, I do not see iframe, it just shows me in DIV but not Iframe.
    How do I do Iframe?

  2. 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??

  3. Hi
    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.
    Cheers

  4. Hi I followed the above instruction. but when I wrote

    " < a rel= "{handler: ' iframe, size: (x:700 , y:400}}" class="modal" href="http://google.com"&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

Comments are closed.