Use one of samples from bootstrap V5 (https://getbootstrap.com/docs/5.0/components/modal/)
Modal Popup opens according sample
Modal popups do not work at all (no javascript errors or any other error reported)
Joomla 4.0 Beta 7 with Casiopeia Template)
Modal works fine with Joomla 3.9
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>
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:
In Joomla 4 you have to explicitly add the interactive component you need.
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?
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.
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-03-13 16:23:34 |
Closed_By | ⇒ | jschmi102 |
Status | Closed | ⇒ | New |
Closed_Date | 2021-03-13 16:23:34 | ⇒ | |
Closed_By | jschmi102 | ⇒ |
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).
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...
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
FWIW your data attributes are wrong, check the bootstrap 5 docs
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.
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.
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
Status | New | ⇒ | Closed |
Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2021-03-14 16:06:16 |
Closed_By | ⇒ | jschmi102 |
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:
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?
Can you provide the code you used and didn't work? Joomla has numerous modals and all of them are totally functional