Contact From 7 事件的多个 Bootstrap 模式问题
Multiple Bootstrap modal issue with Contact From 7 event
我有一个 bootstrap5 模态，其中通过短代码添加了联系表 7。成功提交表单后，它应该显示另一个模式，其中包含工作正常的感谢消息。
但是我想在显示第二个模态时隐藏第一个模态（联系表）。
这是实时 link：https://onlinedemoserver.com/Techmatix/contact-us/（当您转到页脚并单击“让我们谈谈”时，您会找到该表格）。
这是 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 -->
注意：当出现第二个模态时，我在控制台上收到的错误是：未捕获的范围错误：超出最大调用堆栈大小。
我自己解决了这个问题，方法是在关闭第二个模态时从两个模态中删除 show class 并将 display none 添加到由创建的背景 div主体末尾的模态。
我有一个 bootstrap5 模态，其中通过短代码添加了联系表 7。成功提交表单后，它应该显示另一个模式，其中包含工作正常的感谢消息。 但是我想在显示第二个模态时隐藏第一个模态（联系表）。 这是实时 link：https://onlinedemoserver.com/Techmatix/contact-us/（当您转到页脚并单击“让我们谈谈”时，您会找到该表格）。 这是 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 -->
注意：当出现第二个模态时，我在控制台上收到的错误是：未捕获的范围错误：超出最大调用堆栈大小。
我自己解决了这个问题，方法是在关闭第二个模态时从两个模态中删除 show class 并将 display none 添加到由创建的背景 div主体末尾的模态。