I have a bootstrap5 modal in which contact form 7 is added through shortcode. On successfully submission of form, it should display another modal having thank you message which is working fine. But I want to hide the first modal (the contact form) when the second modal is displayed. Here is the live link: https://onlinedemoserver.com/Techmatix/contact-us/ (You will find the form when you go to footer and click on Lets talk). Here is the javascript code:
var footer_section = document.querySelector('.contact-footer .wpcf7');
if(footer_section){
footer_section.addEventListener( 'wpcf7mailsent', function( event )
{
$("#contactfooterform").modal("hide");
$("#contactfooterthankyou").modal("show");
}, false);
$("#contactfooterthankyou .send-btn").on("click", function()
{
$("#contactfooterthankyou").modal("hide");
});
}
Here is the HTML code:
<div class="container-fluid footer-bg-color">
<br>
<div class="pt-4">
<div class="row pl-4 footer-first-row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img src="<?php echo get_template_directory_uri(); ?>/includes/images/footer/logo.png">
</div>
<?php if ( ! is_active_sidebar( 'footer-1' ) ) {
return;
}
?>
<?php dynamic_sidebar( 'footer-1' ); ?>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12 center-btn m-auto">
<div class=" footer-talk" data-toggle="modal" data-target="#contactfooterform" data-whatever="@mdo">
<div class="inner-circle">
<p class="footer-talk-text">
Lets talk!
</p>
</div>
</div>
</div>
<!-- Modal Popup for Lets Talk Start -->
<div class="modal fade" id="contactfooterform" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-lg" role="document">
<div class="container pop-up-wrap-body p-0 m-0">
<div class="container lets-talk-modal modal-content p-0 p-lg-5">
<div class="modal-header">
<h1 class="modal-title lets-modal-header" id="exampleModalLabel">Let’s <span class="sub-heading-lets">talk!</span></h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><img src="<?php echo get_template_directory_uri(); ?>/includes/images/footer/close.png" class="img-fluid"></span>
</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h5 class="lets-modal-sub-header">Start a conversation around new business<br> opportunities</h5>
</div>
</div>
</div>
<div class="container pop-up-wrap p-0 m-0">
<div class="modal-body">
<?php echo do_shortcode('[contact-form-7 id="22" title="Contact Form"]');?>
</div>
</div>
</div>
<div class="container-fluid pop-up-footer">
<div class="row thank-you">
<div class="col-lg-4 col-md-4 col-sm-6 pop-up-footer-text">
<p>1-888-251-1622<br> info@techmatix.nl</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-6 pop-up-footer-text">
<p>Transistorstraat 31, 1322 CK<br> Almere, Netherlands</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Modal popup for Lets Talk End -->
<!-- Thank You Pop up Start -->
<div class="modal fade" id="contactfooterthankyou" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="container pop-up-wrap-body">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title lets-modal-header" id="exampleModalLabel">Thank <span class="sub-heading-lets">You!</span></h1>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><img src="<?php echo get_template_directory_uri(); ?>/includes/images/footer/close.png" class="img-fluid"></span>
</button>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h5 class="lets-modal-sub-header">Your message has been sent</h5>
</div>
</div>
</div>
<div class="container pop-up-wrap">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="modal-footer thank-you-pop-up" class="close" data-dismiss="modal" aria-label="Close" aria-hidden="true">
<button type="button" class="btn btn-primary send-btn">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid pop-up-footer">
<div class="row">
<div class="col-lg-2 col-md-2 col-sm-12 col-xs-12"></div>
<div class="col-lg-4 col-md-4 col-sm-12 col-xs-12 pop-up-footer-text">
<p>1-888-251-1622<br> info@techmatix.nl</p>
</div>
<div class="col-lg-5 col-md-5 col-sm-12 col-xs-12 pop-up-footer-text">
<p>Transistorstraat 31, 1322 CK<br> Almere, Netherlands</p>
</div>
<div class="col-lg-1 col-md-1 col-sm-12 col-xs-12"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Thank You Pop up End -->
Note: The error I am getting on console when second modal appears is: Uncaught RangeError: Maximum call stack size exceeded.
I have fixed this issue on my own by removing show class from both modals when the second modal is closed and adding display none to backdrop div which was being created by modal at the end of body.