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><br /><br />
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><br /><br />
Ok now let’s change the handler to image and put this code, see the modal window is now as the image size
<br /><br />
<a rel="{handler: 'image', size: {x: 540, y: 400}}" class="modal" href="images/joomla_logo_black.jpg">click me</a><br /><br />
try more and let me us know.
This articles is read 847 times
Last Update on June 8th, 2010
