Bootstrap Modal Popup with custom load trigger not working

[dmurphy4]

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!

[Pavel-ww]

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]

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.

[Pavel-ww]

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

[Pavel-ww]

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.