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">

<?php endif ?>

Tim (

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 Deborah - December 9, 2020

That's a good solution. No need to load that script if it's not being used. You can leave the area between the else and endif completely blank.

<?php else: // not checked ?>
<?php endif ?>

By MercerDesign - December 9, 2020

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