Modals and Joomla

HyundaiSanta · Post by **HyundaiSanta** » Mon Feb 10, 2025 4:56 pm

Hi all, A client with has asked me to add a very simple modal page to their site and this is really throwing me for a loop.

All the modal needs to do is popup in the center of the screen and display this message: "The site is experiencing Heavy Traffic. Please click Ok to close"

My client does not want to pay for any extensions. If you want popup to have memory functions (ie not showing up everytime someone access the site) then you have to pay for the pro version of regular labs.

So far i have managed to create a custom module from within the admin console and just paste the bootstrap code in there.

Code: Select all

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Example of Auto Loading Bootstrap Modal on Page Load</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


    <script>
        $(document).ready(function () {
            $("#myModal").modal('show');
        });
    </script>

</head>

<body>
   

    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    
                    <h5 class="modal-title"> site is experiencing a higher-than-normal volume</h5>
                </div>
                <div class="modal-body">
                    <p>Users may experience intermittent connection issues</p>
                    <ul>
                        <li>Our technical teams are currently working to resolve this issue.</li>
                        <li>Click “Close” to acknowledge this and enter the  site.</li>
                    </ul>


                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>

</html>

This is causing the spacing for the listed items inside of the sites other modules to get way too big. Also the close button is not working.

Am i on the correct track? I'm not really sure what the best practice is for modals in joomla. My understanding is that the Cassiopeia template has its own predefined layout so i'm not sure if my code is interfering with that.

ceford · Post by **ceford** » Mon Feb 10, 2025 5:45 pm

What server condition are you using to determine whether there is heavy traffic? I think that putting a complete HTML document in a modal is not the right approach. Have a look at this article that includes the use of modals: https://jdocmanual.org/en/jdocmanual?ar ... n-joomla-4

I think you should use a plugin to determine whether display is needed. You could set a cookie to do it only once per session or once per time period. And I guess you could use a System Message rather than a module to display a message.

HyundaiSanta · Post by **HyundaiSanta** » Mon Feb 10, 2025 6:41 pm

Thanks for reaching out ceford. That message was more of an example. I think my client just wants to deploy a simple modal when the need arises.

i have seen that document but im not entirely certain where i put that line of code

"Assuming you have the HTML part already in your Layout, you will also need to include the interactivity (the JavaScript part):

\Joomla\CMS\HTML\HTMLHelper::_('bootstrap.modal', '.selector', []);"

where exactly does this go? The instructions mention the Layout, do they actually mean the cassieopia layout?

Matt Bourne · Post by **Matt Bourne** » Mon Feb 10, 2025 8:12 pm

Try to put the custom code on any custom HTML module and put the module at the front page or any page that you need it to be, one of my favourite php/js/css/html parsing module is

https://extensions.joomla.org/extension ... r-scripts/
btw, i edit your script to use the native joomla bootstrap 5 and the modal libraries itself here, works on my desktop

full codebase

Code: Select all

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Example of Auto Loading Bootstrap Modal on Page Load</title>

    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom Script to check first visit -->
    <script>
        window.onload = function () {
            // Check if the user has visited before using sessionStorage
            if (!sessionStorage.getItem('modalShown')) {
                // Show the modal
                var myModal = new bootstrap.Modal(document.getElementById('myModal'));
                myModal.show();

                // Set a sessionStorage item to mark that the modal has been shown
                sessionStorage.setItem('modalShown', 'true');
            }
        };
    </script>

</head>

<body>

    <!-- Modal HTML -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Site is experiencing a higher-than-normal volume</h5>
                </div>
                <div class="modal-body">
                    <p>Users may experience intermittent connection issues.</p>
                    <ul>
                        <li>Our technical teams are currently working to resolve this issue.</li>
                        <li>Click “Close” to acknowledge this and enter the site.</li>
                    </ul>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS and Popper.js -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

</body>

</html>

template override

Code: Select all

<body>
    <?php echo $this->getBuffer('modules', 'position-7'); // Adjust module position if needed ?>

    <!-- Add your modal code here before the closing body tag -->
    <div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Site is experiencing a higher-than-normal volume</h5>
                </div>
                <div class="modal-body">
                    <p>Users may experience intermittent connection issues.</p>
                    <ul>
                        <li>Our technical teams are currently working to resolve this issue.</li>
                        <li>Click “Close” to acknowledge this and enter the site.</li>
                    </ul>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Add your Bootstrap 5 JS and Popper.js links here -->

</body>

ceford · Post by **ceford** » Mon Feb 10, 2025 8:55 pm

Matt Bourne wrote: ↑Mon Feb 10, 2025 8:12 pm Try to put the custom code on any custom HTML module and put the module at the front page or any page that you need it to be, one of my favourite php/js/css/html parsing module is

Nice solution! If it could be done with a plugin it would be independent of the landing page and might be triggered by an external resource measure (I have no idea what).

HyundaiSanta · Post by **HyundaiSanta** » Tue Feb 11, 2025 6:15 am

Hi everyone, thank you for all of your responses!

I probably could have phrased my first post better, but yes, in its current state the module is display a modal.
The issue is the bootstrap i placed in that module is conflicting with the css in the stock Cassiopeia template.
This conflicts are causing the headings and ul's to be sized much larger when the modal module is published.

Wow Matt, Thankyou so much for this. you definitely went above and beyond.
Could you go more in depth about the template override?

Based on these instructions here : https://docs.joomla.org/J4.x:Template_Overrides ,it sounds like the idea behind template overrides is to add or subtract functionality from an extension or module? From what i can see it looks like this override is changing the position of the modal?

My understanding is that modules are the items seen in the left and right side bars. When i make a module in the admin interface it will only display if i pick either the "top" or "debug" positions. Is debug the correct position? Since this is a modal and remains invisible until page load it doesn't exactly need a position, right?

Matt Bourne · Post by **Matt Bourne** » Wed Feb 12, 2025 1:02 am

HyundaiSanta wrote: ↑Tue Feb 11, 2025 6:15 am Hi everyone, thank you for all of your responses!

I probably could have phrased my first post better, but yes, in its current state the module is display a modal.
The issue is the bootstrap i placed in that module is conflicting with the css in the stock Cassiopeia template.
This conflicts are causing the headings and ul's to be sized much larger when the modal module is published.

Wow Matt, Thankyou so much for this. you definitely went above and beyond.
Could you go more in depth about the template override?

Based on these instructions here : https://docs.joomla.org/J4.x:Template_Overrides ,it sounds like the idea behind template overrides is to add or subtract functionality from an extension or module? From what i can see it looks like this override is changing the position of the modal?

My understanding is that modules are the items seen in the left and right side bars. When i make a module in the admin interface it will only display if i pick either the "top" or "debug" positions. Is debug the correct position? Since this is a modal and remains invisible until page load it doesn't exactly need a position, right?

Hi

I found something even better, a modal pop out plugin that support Joomla 5.2 and it's totally FREE

EngageBox by Tassos Marinos, Cool guy btw
https://extensions.joomla.org/extension/engage-box/

you can try the free version here
https://www.tassos.gr/joomla-extensions ... /subscribe

I did install that on my website here, on my footer if you want to see how it works

If you want to pop out a module, maybe you can try this free solution as well, from my fav dev here

https://extensions.joomla.org/extension ... pop-up-jt/

Matt Bourne · Post by **Matt Bourne** » Sun Feb 16, 2025 10:01 pm

you also can use this cookies pop up notification, just change the cookies text related to be your actual notification text contents and you're good to go, good luck!

https://extensions.joomla.org/extension ... e-consent/

The Joomla! Forum™

Modals and Joomla

Modals and Joomla

Re: Modals and Joomla

Re: Modals and Joomla

Re: Modals and Joomla

Re: Modals and Joomla

Re: Modals and Joomla

Re: Modals and Joomla

Re: Modals and Joomla