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