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:Here's my Javascript: And here's the rendered html: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!
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:
$wa->registerAndUseScript('mod_nu_popup', 'modules/mod_nu_popup/tmpl/popupscript.js', [], ['type' => 'module'], ['core']);Code:
document.addEventListener("DOMContentLoaded", function (event) {var myModal = new bootstrap.Modal(document.getElementById("nuModal"), {});setTimeout(function () { myModal.show();}, 1000);})Code:
<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>Thanks in advance!
Statistics: Posted by dmurphy4 — Tue Feb 27, 2024 11:44 pm