Modals: Adding a modal to an included menu

I want to add a link in my dashboard menu that opens a modal. What is the best plan of attack? Do I add the modal to the include file and any server connect functions I need? Or do I have to have the modal on my page?

I would think that if you want to open the modal from the main/layout page regardless of what what content/include view is currently active, then the modal would need to be part of the layout page?

Solved. Added it to the menu include. Found out what I was doing wrong. Was being a bonehead. Beer time.

1 Like

Hey @brad, do you mind explaining how you made this work?

I added a modal to a menu include file and confirm the modal launches when opening the include file independently. However, when the include file is loaded on another page, it does not launch.

Hi Liran,

I am not in front of that computer right now but I really didn’t do anything different than adding a modal to any page if I remember correctly. When I get the chance I will get on. that computer that has that site and paste the code here for you.

This is the site where I used it. The black bar at the top is in my header include file and clicking on the Covid information link opens a modal.

Can you post a link to your site?

Thank you @brad!

My site is only local at the moment. So I cannot post a link to it.

Really appreciate your looking into this. The biggest question I have is: where does the code for the modal reside? In the include file?

I then also presume the code to launch the modal also resides there?

Yes, I have it in the include file.

That is how I have it. The trigger is also within the include. Where is your trigger located?

Here is my include code …

<!-- Wappler include head-page="../index.php" appConnect="local" is="dmx-app" bootstrap4="local" fontawesome_5pro="cdn" jquery_slim_33="cdn" components="{dmxBootstrap4Navigation:{},dmxBootstrap4Modal:{}}" -->
<section id="Modals">
    <div class="modal" id="modalCovid19" is="dmx-bs4-modal" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title"><i class="fad fa-head-side-mask"></i>&nbsp; COVID-19 Re-Opening Action Plan</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">Ă—</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Dear members and friends of the Williams Lake Studio Theatre,</p>
                    <p class="text-justify">Over the past few months, we have been hard at work creating a COVID-19 Action Plan in preparation for when we are able to safely open our doors to our members and patrons. Although we don't yet know when
                        it will be safe to
                        invite everyone back into our little theatre, we believe it is important to be well prepared for when the time does come.</p>
                    <p class="text-justify">Please give the attached document a read so that you are well informed of our new safety expectations. All points outlined in the document will be strictly enforced upon reopening. Also, keep in mind that
                        the COVID-19 Action
                        Plan is a working document, and is subject to change.</p>
                    <a href="../_documents/Covid19ReopeningPlan.pdf" class="shadow btn btn-primary btn-sm btn-block"><i class="fad fa-download"></i>&nbsp; Download Full COVID-19 Re-Opening Action Plan</a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary shadow" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</section>
<section id="Header">
    <section class="bg-dark" id="Covid19">
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="text-light text-right mt-3"><i class="fad fa-head-side-mask"></i><a href="#" class="text-light" data-toggle="modal" data-target="#modalCovid19">&nbsp; COVID-19 Re-Opening Action Plan</a>&nbsp;</p>
                </div>
            </div>
        </div>
    </section>
    <header class="bg-primary navbar-dark" id="Navigation">
        <div class="container">
            <div class="row">
                <div class="col">
                    <nav class="navbar navbar-expand-lg bg-primary justify-content-end navbar-dark sticky-top">
                        <a class="navbar-brand ml-auto" href="./"><i class="fad fa-theater-masks"></i>&nbsp; Williams Lake Studio Theatre</a>
                        </a>
                        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar1_collapse" aria-controls="navbar1_collapse" aria-expanded="false" aria-label="Toggle navigation">
                            <span class="navbar-toggler-icon"></span>
                        </button>
                        <div class="collapse navbar-collapse justify-content-end" id="navbar1_collapse">
                            <div class="navbar-nav">
                                <div class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="About" role="button" aria-haspopup="true" aria-expanded="false"><i class="fad fa-info-square"></i>&nbsp; Information</a>
                                    <div class="dropdown-menu" aria-labelledby="dropdown2">
                                        <a class="dropdown-item" href="../about">About Us</a>
                                        <a class="dropdown-item" href="../membership">Membership Information</a>
                                        <a class="dropdown-item" href="../sponsorship">Sponsorship Information</a>
                                    </div>
                                </div>
                                <div class="nav-item dropdown">
                                    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" id="Productions" role="button" aria-haspopup="true" aria-expanded="false"><i class="fad fa-theater-masks"></i>&nbsp; Productions</a>
                                    <div class="dropdown-menu" aria-labelledby="dropdown1">
                                        <a class="dropdown-item" href="../productions">Production History</a>
                                        <a class="dropdown-item" href="../album">Photo Galleries</a>
                                        <a class="dropdown-item" href="../awards">Festival Awards</a>
                                        <a class="dropdown-item" href="../membersearch">Member History</a>
                                    </div>
                                </div>
                                <a class="nav-item nav-link" href="https://boxoffice.wlstudiotheatre.ca"><i class="fad fa-ticket-alt"></i>&nbsp; Tickets</a>
                                <a class="nav-item nav-link" href="../archive"><i class="fad fa-newspaper"></i>&nbsp; News</a>
                                <a class="nav-item nav-link" href="../contact"><i class="fad fa-at"></i>&nbsp; Contact</a>
                            </div>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </header>
</section>

Brilliant! Thank you @brad!

I was getting an “App already running” error which was caused by App Connect loading on both the include file as well as the page. Once that was fixed, following along your logic I got this working.

1 Like