Shor hide a modal popup

7 posts by 3 authors in: Forums > CMS Builder
Last Post: December 9, 2020   (RSS)

By MercerDesign - December 3, 2020

I've got a Bootstrap modal that displays on page load and the content is updateable in a CMS section editor but I want to be able to show or hide the modal depending on when we want it to show. How can I do that with a checkbox, the Bootstrap styling that controls if it displays is .modal-open so to hide it I need to get rid of that styling but preferably with a checkbox.

By Toledoh - December 6, 2020

I do this pretty regularly.  Just create a check box such as "Show Modal", then wrap it in an if statement.  If the checkbbox isn't ticked, there's no modal to display.  As far as I'm aware, it doesn't matter that you still have the script trying to run it.

<?php if ($record['display_alert']): ?>

<div class="modal fade" id="exampleModal">
...
</div>

<?php endif ?>
Cheers,

Tim (toledoh.com.au)

By MercerDesign - December 8, 2020 - edited: December 8, 2020

Thank you. It looks like I have to wrap the statement round a class, this is the code that tells the modal to open on page load:

<body class="appear-animate js-focus-visible modal-open">

So the modal-open needs toi be disabled. Do you know how I can do that? The checkbox is called show_modal.

Here is a link to the page that the modal appears on: https://devonshirehouseschool.co.uk/SITE-DEVELOPMENT/index.php

By Deborah - December 8, 2020

Give this a try:

<?php if ($record['show_modal'] == "1"): // checked ?>
<body class="appear-animate js-focus-visible modal-open">
<?php else: // not checked ?>
<body class="appear-animate js-focus-visible">
<?php endif ?>

~ Deborah

By MercerDesign - December 9, 2020

Thank you. I got it to work by wrapping the if statement around the script to call for the javascript file.

<?php if ($pop_up_notificationRecord['show_modal'] == "1"): // checked ?>
<script type="text/javascript" src="js/index.js"></script>
<?php else: // not checked ?>
<script type="text/javascript" src=""></script>
<?php endif ?>

By MercerDesign - December 9, 2020

Thank you, I removed the unwanted script already. Again, thank you for your help.