Posted
Modal windows or lightboxes are useful for showing extra information or popup forms. This FAQ shows a way to get the Joomla! modal window to work from a ChronoForm; and how to use a third-party Modal plug-in.
Using the Joomla! Modal window
In the form Designer tab drag in a Custom Code element from the Advanced elements group. This will be used to create the link to the Modal window.
In the Custom Code action add code like this example:
<?php
// load the Joomla! modal code
JHtml::_('behavior.modal');
// Over-ride the default CF CSS for a modal link
$jdoc = \JFactory::getDocument();
$style = "
#modal_a {
display: inline;
position: relative;
}";
$jdoc->addStyleDeclaration($style);
?>
<div>Some text here <a class="modal" id='modal_a' href="index.php?option=com_chronoforms5&chronoform=demo-basic-contact&tmpl=component" rel="{handler: 'iframe', size: {x: 600, y: 450}}" >open form</a> more text here.</div>
There are three main parts to this example:
a. We need to load the Joomla! modal code with the 'behaviour.modal' call.
b. We need to over-ride some of the default ChronoForms styling which hides a link with the class='modal'. To do this we add a unique id to the link that we want to call the modal window from. Make sure that the ids in the link and the CSS match up.
c. There is some HTML including the link that we want to open. Note that you must include the rel attribute to specify the size of the window. Here the content is an iFrame opening one of the ChronoForms demo forms but change the link settings to do what you need.
Note: the CSS could be added in a Load CSS action without the wrapping PHP; it is shown in the Custom Code action here to keep the FAQ simpler.
Using the NoNumber Modal plugin
Download and install the Modal plug-in - I used the free version. There are other modal plug-ins and I would expect them to work in a similar way.
a. In the form Setup tab drag a Joomla! Plug-ins action from the Joomla! actions group into the On Load event and move it up before the HTML (Render Form) action.
b. In the form Designer tab add a Custom Code element from the Advanced elements group and add code like this:
<div>
{modal images/joomla_black.gif|Joomla! logo }Click Here{/modal}
</div>
Change the image path to the one you need.