Bootstrap Modal Popup with custom load trigger not working

For Joomla! 4.x Coding related discussions, you could also use: http://groups.google.com/group/joomla-dev-general

Moderators: ooffick, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
dmurphy4
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Tue Aug 26, 2014 3:26 pm

Bootstrap Modal Popup with custom load trigger not working

Post by dmurphy4 » Tue Feb 27, 2024 11:44 pm

I'm trying to get a simple modal to trigger after vising a page using a custom module I created.

I've got it working in Codepen but for the life of me I cannot get it to work in Joomla as a module.

When I try to run the module in a set page, the modal does not appear and I get an error in the console saying that it can't find bootstrap function.

This module specifically triggers the modal after 1000ms instead of triggering through a traditional button.

View example in codepen: https://codepen.io/dsm/pen/mdgbwBY

I'm loading the script in like so and displays after bootstrap is loaded:

Code: Select all

$wa->registerAndUseScript('mod_nu_popup', 'modules/mod_nu_popup/tmpl/popupscript.js', [], ['type' => 'module'], ['core']);
Here's my Javascript:

Code: Select all

document.addEventListener("DOMContentLoaded", function (event) {
var myModal = new bootstrap.Modal(document.getElementById("nuModal"), {});
setTimeout(function () {
  myModal.show();
}, 1000);
})
And here's the rendered html:

Code: Select all

<div class="modal fade numodal" id="nuModal" tabindex="-1" aria-labelledby="nuModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="popup-img">
                    <a class="d-block" href="<?php echo $popupUrl; ?>">
                        <img src="https://mysite.com/image.jpg" alt="alt text"/>
                    </a>
                </div>                    
                <p><a class="btn btn-primary" href="https://mysite.com">Visit Today!</a></p>	        
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        </div>
    </div>
</div>
Some resources I've found but did not help me so far (or I don't understand): https://issues.joomla.org/tracker/joomla-cms/32665 and https://docs.joomla.org/Special:MyLangu ... n_Joomla_4

Thanks in advance!

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1613
Joined: Tue Jun 30, 2020 12:17 pm

Re: Bootstrap Modal Popup with custom load trigger not working

Post by Pavel-ww » Wed Feb 28, 2024 6:42 am

Hi. Depends on the template. If you use Cassiopea, I believe you have forgotten about the call of Bootstrap Modal component.

https://docs.joomla.org/J4.x:Using_Boot ... n_Joomla_4

dmurphy4
Joomla! Apprentice
Joomla! Apprentice
Posts: 28
Joined: Tue Aug 26, 2014 3:26 pm

Re: Bootstrap Modal Popup with custom load trigger not working

Post by dmurphy4 » Wed Feb 28, 2024 7:55 pm

I read that but I don't think it addresses using custom event triggers using javascript. I am using a child them from the Cassiopeia them and forgot to mention I am loading the correct modules into the index.php file like so:

Code: Select all

// add Bootstrap components:
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tab', '.selector', []);
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.offcanvas', '.selector', []);
If i'm just using the modal markup as provided by Bootstrap, it works fine when I click the button to trigger it. The difference is I want to trigger the modal after page load. That's when I get the bootstrap function not found error.

I'll try to get a live website url posted this evening.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1613
Joined: Tue Jun 30, 2020 12:17 pm

Re: Bootstrap Modal Popup with custom load trigger not working

Post by Pavel-ww » Thu Feb 29, 2024 7:11 am

dmurphy4 wrote:
Wed Feb 28, 2024 7:55 pm

Code: Select all

// add Bootstrap components:
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.tab', '.selector', []);
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.carousel', '.selector', []);
\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.offcanvas', '.selector', []);
Hi. Try it in this form, not in template's index.php but in overriden module's default.php or in module's your_own_layout_name.php.
2.jpg
This will be called only if the module is published, which will improve performance.

But if you want it in Index.php, then in the same way, since the HTMLHelper call line is already there.
3.jpg
You do not have the required permissions to view the files attached to this post.

User avatar
Pavel-ww
Joomla! Ace
Joomla! Ace
Posts: 1613
Joined: Tue Jun 30, 2020 12:17 pm

Re: Bootstrap Modal Popup with custom load trigger not working

Post by Pavel-ww » Thu Feb 29, 2024 7:35 am

dmurphy4 wrote:
Tue Feb 27, 2024 11:44 pm
I'm loading the script in like so and displays after bootstrap is loaded:

Code: Select all

$wa->registerAndUseScript('mod_nu_popup', 'modules/mod_nu_popup/tmpl/popupscript.js', [], ['type' => 'module'], ['core']);
And this does not make sense in your case. Just create user.js in the same way as user.css is created and write your js code there.

Loading scripts and styles through $wa makes sense only if you create your own installed extansions (module, component, plugin). Or if you connect a big script, like a framework. For example Vue.js, React and similar.


Post Reply

Return to “Joomla! 4.x Coding”