Modal

JHTML::_('behavior.modal', $selector, $arrayparams)

Calls javascript to display ligthboxes, popups with good visual appearance, to display images, external pages, or views of own component.

Defined in

/joomla/html/html/behavior.php ( line 117 )

Importing

JHTML::_('behavior.modal');
Note: This is the basic import. If someone more know the adicional params, please email me.

Examples

The code below illustrates how to call an external site to open in a lightbox

Code:

<?php JHTML::_('behavior.modal'); ?>
<a rel="{handler: 'iframe', size: {x: 750, y: 600}}" 
href="http://www.fititnt.org/joomla-api.html" target="_blank"> Click me :D</a>

Output :

   Click me :D

This code is simple. Is near one simple < a > link with plus some javascript information like size that you can edit. The only requiriment is that you must call at any part of your document the JHTML::_('behavior.modal'), that will incluse on html head that all mootools javascript to run lightbox.

The code below illustrates how to receive data from a view called the lightbox - Good for complex popups

Description: On this example you will need make a new component or implement in your component. At the end of this page you will find one download link to one example component that is done with this logic.

Code for your the view that will receive the data. In this case com_wedmodal/views/wedmodals/tmpl/default.php. This will call the mooltools, and the specific javascript funtion ro receive two variables:

<?php
JHTML::_('behavior.modal');
$jspop2 = "<script type=\"text/javascript\">
               function jSelectPopupfromview(vara, varb) {
                       document.getElementById('pophello1').value = vara;
                       document.getElementById('pophellohiden1').value = varb;
                       document.getElementById('sbox-window').close();
               }
  </script>";
$document =& JFactory::getDocument();
$document->addCustomTag($jspop2);
?>

On the same file, add this form com_wedmodal/views/wedmodals/tmpl/default.php:

<form method="post" name="adminForm" id="adminForm" />
<input name="pophello1" id="pophello1" type="text" />
<input name="pophellohiden1" id="pophellohiden1" type="hidden" value="value" />
<a rel="{handler: 'iframe', size: {x: 950, y: 200}}" 
href="/component/wedmodal/?controller=popup&task=mypopuptask&tmpl=component" 
class="modal" target="_blank"> Take data from view</a>
  <input type="submit" value="Submit" />

Ok. Now you have the basic main page to receive the data. But as you see on heref of the link on last code, you will need call one task from the controller. Lets put code of the task mypopuptask on com_wedmodal/controllers/popup.php:

class WedmodalsControllerPopup extends WedmodalsController
{
    /**
     * constructor (registers additional tasks to methods)
     * @return void
     */
    function __construct()
    {
        parent::__construct();
    }// function
    
    function mypopuptask() {
    //Here you set what the task will do
    //Set the View
     $view = & $this->getView('popup', 'html');
    // Get/Create the model
    $model = & $this->getModel('popup');        
    // Push the model into the view (as default)
    $view->setModel($model, true);
    // Display the entire view
    $view->display($tpl = null);
    } 
}// class

On last controller code, you will call one Model 'popup' that in this example no do not have some special code. Just add one empty model with the class WedmodalsModelPopup for do not have errors.

Also, on com_wedmodal/views/popup/view.html.php do not need any special code, just add like any other view.html.php

Finaly, we will set what will appear on com_wedmodal/views/popup/tmpl/default.php, the real content that you will see when click on link of this fist code of this example:

<a onclick="window.parent.jSelectPopupfromview('Hiho World :D',
'I have one secret for you');"> Click me world!  </a>

As you see, this is just one link with same amount of variables that we have to receive on com_wedmodal/views/wedmodals/tmpl/default.php. Is really important that you pay atention on all these steps, and also download the code with the working example for do not lose time.
This is a simple example, but have sure that you can do thinks really interesting, like call one view with a long list of articles and when you click on article the link give back to the page the ID of that article.

The code below illustrates how to receive data from a funtion inside of view.html.php called the lightbox - Good for simple popups

Soon I will add here this tutorial, but anyway of can see the working code the file for download. Also, this example is not so diferent from method that call one entire view.

Download example code

Component WEDModal

Alguns tópicos gerais

Atividade no Github

Breadcrumbs