3

I'm trying to upgrade my site to Joomla 4. In Joomla 3 I used "JHTML::_('behavior.modal');" to display a link to an image inside a lightbox. As also explained in this question: Joomla API for lightbox?

Since this method is removed in Joomla 4, this no longer works. In the API docs I have found it is suggested to use bootstrap modal, but that does not work for link to images.

0

1 Answer 1

3

You can use it as follow:

<?php
defined('_JEXEC') or die;

use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Layout\LayoutHelper;

HTMLHelper::_('bootstrap.modal');

?>

<?php
$modalData = [
        'selector' => 'uniqueIDName',
        'params'   => [
            'title'  => 'yourTitle',
            'footer' =>  htmlMarkup
        ],
        'body' => htmlMarkup
    ];
?>
<?php echo LayoutHelper::render('libraries.html.bootstrap.modal.main', $modalData); ?>

All the variables you can use:

/**
 * Layout variables
 * -----------------
 * @var   string  $selector  Unique DOM identifier for the modal. CSS id without #
 * @var   array   $params    Modal parameters. Default supported parameters:
 *                             - title        string   The modal title
 *                             - backdrop     mixed    A boolean select if a modal-backdrop element should be included (default = true)
 *                                                     The string 'static' includes a backdrop which doesn't close the modal on click.
 *                             - keyboard     boolean  Closes the modal when escape key is pressed (default = true)
 *                             - closeButton  boolean  Display modal close button (default = true)
 *                             - animation    boolean  Fade in from the top of the page (default = true)
 *                             - url          string   URL of a resource to be inserted as an <iframe> inside the modal body
 *                             - height       string   height of the <iframe> containing the remote resource
 *                             - width        string   width of the <iframe> containing the remote resource
 *                             - bodyHeight   int      Optional height of the modal body in viewport units (vh)
 *                             - modalWidth   int      Optional width of the modal in viewport units (vh)
 *                             - footer       string   Optional markup for the modal footer
 * @var   string  $body      Markup for the modal body. Appended after the <iframe> if the URL option is set
 */
3
  • Stack Exchange loves it when answerers also improve the quality of the question around the same time as answering. This is indicated by the Explainer badge Please suggest an edit on the question which improves the English and makes any other helpful refinements. Commented Jan 16, 2023 at 23:18
  • @mickmackusa not sure of understand what you want me to do. The question is very clear for me so far. Commented Jan 17, 2023 at 0:06
  • There are typos in the asked question such as "suggested t use bootstrap modal" and "but that does nog work". This is a great chance to pretty-up the question. Can the title be improved? Can the body be improved? Can additional relevant tags be added? Commented Jan 17, 2023 at 0:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.