Boostrap Modals

[Alex Chartier]

Am I wrong in believing that the bootstrap models should just open when the object that it is defined on is clicked? Or do I have to manually open it onclick?

First I include the bootstrap modal stuff:

`JHTML::_('bootstrap.modal');'

Then I create a bootstrap modal like so:

`  echo HTMLHelper::_('bootstrap.renderModal','searchModal', array('url' => $url, 'title' => 'Search Modal', 'width' => '350px', 'height' => '500px', 'backdrop' => 'static'));`

I then define an anchor that should popup the modal when clicked:

`<a href='#searchModal' id='searchLink' data-toggle='modal' data-bs-target='searchModal'";`

I should think that when the link is clicked that the modal should open but it does not. If I attach an onclick event listener that opens the modal it works but I would have expected that the bootstrap javascript would do this for me.

Am I wrong? If not is there something in the markup that is incorrect? Am I missing something?

Thanks for your assistance.

[Viper]

No, you not missed. See standard Joomla batch button code for modal at https://github.com/joomla/joomla-cms/blob/staging/layouts/joomla/toolbar/batch.php#L18

[Alex Chartier]

Thank you. Note: in order to see the Bootstrap 5 version you need to switch to the Joomla 4.0 branch.

Looking through a number of other files in the 4.0 branch it appears that most are including Javascript through the WebAssetManager->useScript function. At the top of these js files is a domContentLoaded function that is adding the onClick event, so yes, you are correct that we must manually add the onClick event whether directly in the url or attach once the dom is loaded.

Thanks for pointing me in the right direction.

[Alex Chartier]

OK, so I need to come back to this. After major testing (hampered by a template using BS3) I was able to create a simple modal using the bootstrtap.renderModal and tested it on J3 and J4. On J3 the Joomla helper provides all the markup and javascript for the modal to open without the need to add a separate onClick function to open it. On J4, the exact same code does not open the modal. I believe this is a bug in the J4 code.

I would like to ask someone to test this for me and see if you get the same results. If you do I will open this as an issue on the Joomla Issues Git. Below is the code:

use Joomla\CMS\HTML\HTMLHelper;

echo '<a href="#modal-test-modal" data-toggle="modal" class="btn btn-default btn-small btn-sm">

                        <i class="fa fa-eye"></i> Modal test link</a>';

$modalParams = array(

    'title'       => 'Test modal',

    'closeButton' => true,

    'height'      => '300px',

    'width'       => '300px',

    'backdrop'    => 'static',

    'keyboard'    => true,

    'modalWidth' => 30, 

    'bodyHeight' => 30,

    'footer'      => '<div class="alert alert-info">Modal footer</div>'

);

$modalBody = '<div class="alert alert-success">Modal <strong>body!</strong></div>';

echo HTMLHelper::_('bootstrap.renderModal', 'modal-test-modal', $modalParams, $modalBody);

Nothing else is required on J3. On J4 the modal does not open when the button is clicked.

Thanks in advance.

[Hannes Papenberg]

Without having looked into this deeper, have you checked that the data-toggle attribute doesn't have to be data-bs-toggle? Bootstrap had introduced a prefix in these data attributes.

--
You received this message because you are subscribed to the Google Groups "Joomla! General Development" group.
To unsubscribe from this group and stop receiving emails from it, send an email to joomla-dev-gene...@googlegroups.com.
To view this discussion on the web, visit https://groups.google.com/d/msgid/joomla-dev-general/154df9bc-bb8e-47ab-bbbd-eb0c6b886f94n%40googlegroups.com.

[Alex Chartier]

Hannes, you are absolutely correct. Changing this small thing and the modal opens under J4. Thank you so much. 

[Alex Chartier]

Returning to this. After much further testing (complicated by using a Bootstrap 3 template) I have found that under J3 the bootstrap.render logic automatically creates the necessary javascript for the modal window to open, it is not necessary to attach an onClick method. The exact same code under J4 does not create this javascript. I think this is a bug in the J4 implementation but I would like to get confirmation from one or two other developers before I post it to the J4 issues page.

Here is the simple code I used:

use Joomla\CMS\HTML\HTMLHelper;

echo '<a href="#modal-test-modal" data-toggle="modal" class="btn btn-default btn-small btn-sm">

                        <i class="fa fa-eye"></i> Modal test link</a>';

$modalParams = array(

    'title'       => 'Test modal',

    'closeButton' => true,

    'height'      => '300px',

    'width'       => '300px',

    'backdrop'    => 'static',

    'keyboard'    => true,

    'modalWidth' => 30, 

    'bodyHeight' => 30,

    'footer'      => '<div class="alert alert-info">Modal footer</div>'

);

$modalBody = '<div class="alert alert-success">Modal <strong>body!</strong></div>';

echo HTMLHelper::_('bootstrap.renderModal', 'modal-test-modal', $modalParams, $modalBody);

Would someone be willing to have a look and maybe test it to see if it is indeed working on J3 but not on J4?

[Alex Chartier]

Please ignore the repeated posting, I posted the one above from the wrong login.

[Bas van den Dikkenberg]

what did you change to get it working do you have working example ?

With kind regards,

Bas van den Dikkenberg

Op zondag 28 februari 2021 om 15:31:23 UTC+1 schreef al...@thealgonquinclub.com:

[Alex Chartier]

Just change data-toggle to data-bs-toggle for J4.

[Bas van den Dikkenberg]

Thanks that did it :-D

Op maandag 6 september 2021 om 14:47:30 UTC+2 schreef al...@thealgonquinclub.com:

[Tom Fuller]

Thank you so much for this thread - it solved a thorny issue for me with developing for Joomla 4. I had used behavior.modal which I think was a MooTools function. It no longer worked. 

I have a function that shows a download link and terms and conditions as a popup prior to download. 

For the group I'm posting my code - of course some of the variables are filled within my class/function.

$downloadlink = '<a href="#modal-test-modal" data-bs-toggle="modal" class="btn btn-default btn-small btn-sm">
'.$download_image.'</a>';
$modalParams = array(
'title' => Text::_('JBS_TERMS_TITLE'),

'closeButton' => true,
'height' => '300px',
'width' => '300px',
'backdrop' => 'static',
'keyboard' => true,
'modalWidth' => 30,
'bodyHeight' => 30,

'footer' => '<div class="alert alert-info">'.Text::_('JBS_TERMS_FOOTER').'</div>'
);

$modalBody = '<div class="alert alert-success">'.$params->get('terms').'<a href="index.php?option=com_proclaim&task=CWMSermons.download&id='.$media->study_id.'&mid=' . $media->id . '">'
. Text::_('JBS_CMN_CONTINUE_TO_DOWNLOAD') . '</a></div>';

$downloadlink .= HTMLHelper::_('bootstrap.renderModal', 'modal-test-modal', $modalParams, $modalBody);

Of course - above the classname in my helper file I have:

use Joomla\CMS\HTML\HTMLHelper;