?
avatar jschmi102
jschmi102
13 Mar 2021

Steps to reproduce the issue

Use one of samples from bootstrap V5 (https://getbootstrap.com/docs/5.0/components/modal/)

Expected result

Modal Popup opens according sample

Actual result

Modal popups do not work at all (no javascript errors or any other error reported)

System information (as much as possible)

Joomla 4.0 Beta 7 with Casiopeia Template)

Additional comments

Modal works fine with Joomla 3.9

avatar jschmi102 jschmi102 - open - 13 Mar 2021
avatar joomla-cms-bot joomla-cms-bot - labeled - 13 Mar 2021
avatar jschmi102 jschmi102 - change - 13 Mar 2021
The description was changed
avatar jschmi102 jschmi102 - edited - 13 Mar 2021
avatar jschmi102 jschmi102 - edited - 13 Mar 2021
avatar dgrammatiko
dgrammatiko - comment - 13 Mar 2021

Can you provide the code you used and didn't work? Joomla has numerous modals and all of them are totally functional

avatar jschmi102
jschmi102 - comment - 13 Mar 2021

this is a sample which is working with Joomla 3.9.25 and not with Joomla 4.0-beta7 (I changed '< and >')

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#popup_modal">Show Modal</button><!-- Modal -->
<div id="popup_modal" class="modal fade" role="document">
<div class="modal-dialog modal-lg" style="width:450px;">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" title="Close">×</button>
<span class="modal-title">This is a Modal</span>
</div>
<div id="popup_modal_body" class="modal-body">Woohoo, you're reading this text in a modal!</div>
</div>
</div>
</div>

avatar dgrammatiko
dgrammatiko - comment - 13 Mar 2021

The HTML by itself WILL NEVER WORK, you need to have also the js in the output. Joomla has helper functions for these:
HTMLHelper::_('bootstrap.modal'); ref:

public static function modal($selector = '', $options = []) :void

In Joomla 4 you have to explicitly add the interactive component you need.

avatar jschmi102
jschmi102 - comment - 13 Mar 2021

hi,
Wiith Joomla 3 a user could add html-code in an article which creates a modal popup (this was my sample). Do you mean this is not any more possible with Joomla 4? Is there a solution for this?

avatar dgrammatiko
dgrammatiko - comment - 13 Mar 2021

READ my comment again: In Joomla 4 you have to explicitly add the interactive component you need. You have to load whatever you need either in the component/module or in the template.

avatar jschmi102 jschmi102 - change - 13 Mar 2021
Status New Closed
Closed_Date 0000-00-00 00:00:00 2021-03-13 16:23:34
Closed_By jschmi102
avatar jschmi102 jschmi102 - close - 13 Mar 2021
avatar jschmi102 jschmi102 - change - 13 Mar 2021
Status Closed New
Closed_Date 2021-03-13 16:23:34
Closed_By jschmi102
avatar jschmi102 jschmi102 - reopen - 13 Mar 2021
avatar jschmi102
jschmi102 - comment - 13 Mar 2021

hi,
pls. advise how I should use this - I added "HTMLHelper::_('bootstrap.modal');" in my php-code but this did not cause adding bootstrap modal jjavascript libs. (could not find docs about this for Joomla4).

avatar dgrammatiko
dgrammatiko - comment - 13 Mar 2021

Did you added also the namespaced part? HTMLHelper is namespaced and needs to be added with the casual use Joomla\CMS\... ;

Also, I have no clue where you try to add this or what is your file you're editing. I've asked you to provide the code and you just pasted some generated HTML, not very helpful...

avatar jschmi102
jschmi102 - comment - 13 Mar 2021

hi,
HTML-code for modal popup is genned by my content plugin. For Joomal of course I am adding only namespaced libs (for htmlhelper: . "use Joomla\CMS\HTML\HTMLHelper;"). Code logic is

  1. HTMLHelper::_('bootstrap.modal');
  2. Generate modal html
  3. return
avatar dgrammatiko
dgrammatiko - comment - 13 Mar 2021

FWIW your data attributes are wrong, check the bootstrap 5 docs

avatar jschmi102
jschmi102 - comment - 13 Mar 2021

what do you mean with "data attibutes". If joomal4 does not provide bootstrap modal support per default any modal-html won't work. For me It seems that calling "HTMLHelper::_('bootstrap.modal" does not provide modal support.

avatar jschmi102
jschmi102 - comment - 13 Mar 2021

hi,
I tried with original samples from bootstrap 5. This seems to work. I'll check what to change (or what is different) compared to version 3 or 4.

avatar brianteeman
brianteeman - comment - 13 Mar 2021

As @dgrammatiko said it is the data attribute

If you look at your code you posted above they are data-something
If you lok at the bootstrap 5 docs and the code you copied from there they are data-bs-something

The problem is not Joomla it is your misreading of the documentation

avatar jschmi102 jschmi102 - change - 14 Mar 2021
Status New Closed
Closed_Date 0000-00-00 00:00:00 2021-03-14 16:06:16
Closed_By jschmi102
avatar jschmi102 jschmi102 - close - 14 Mar 2021
avatar jschmi102
jschmi102 - comment - 14 Mar 2021

hi,
Thank you all for your help! But if there had been some short info about migrating to bootstrap and Joomla 4, this could have helped to avoid to run into problem. For example:

  1. Note - if you are using interactive features of bootstrap you will have to define them using HTMLHelper methods (e.g. "HTMLHelper::_('bootstrap.modal')" for modal support) to have the needed Javascript libraries added.
  2. Keep in mind that bootstrap V5 is not upwards compatible with previous versions, therefore you will have to check or change your HTML-code, javascript-code and related style-sheets.
avatar dgrammatiko
dgrammatiko - comment - 14 Mar 2021

But if there had been some short info about migrating to bootstrap and Joomla 4,

Joomla is an open source project based on contributions, so why don't you update those missing info to help also other devs?

Add a Comment

Login with GitHub to post a comment