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'); ?>

before

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="http://google.com">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.

Listen