Contact From 7 事件的多个 Bootstrap 模式问题

Question

我有一个 bootstrap5 模式，其中通过简码添加联系表 7。 成功提交表单后，它应该显示另一个模式，其中包含运行良好的感谢消息。 但是我想在显示第二个模式时隐藏第一个模式（联系表格）。 这是实时链接： https://onlinedemoserver.com/Techmatix/contact-us/ （当您将 go 转到页脚并单击“让我们谈谈”时，您会找到该表格）。 这是 javascript 代码：

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");
    });
    }

这是 HTML 代码：

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

注意：当出现第二个模式时，我在控制台上遇到的错误是：Uncaught RangeError: Maximum call stack size exceeded。

Answer 1

我自己解决了这个问题，方法是在第二个模态关闭时从两个模态中删除 show class 并将 display none 添加到由模态在正文末尾创建的背景 div 中。