Php 为什么我的jquery提交表单弹出窗口会禁用任何按钮单击或页面响应？

我对jquery有点陌生

目前，我在wp上有一个contact 7表单，并且已经创建了下面的功能，以便在成功提交时有一个模式弹出窗口。然而，尽管它能按预期工作，但当弹出模式出现时，屏幕会变暗一点，“返回主页”或“关闭”按钮都不起作用，或者页面上的任何其他按钮也不起作用

网站是Deltadesigns.co-请随意提交表单-检查控制台中没有显示错误

代码如下：

     <div class="col-md-9 col-sm-10">
        <div class="contact-form" id="contact-id">
        
          <?php echo do_shortcode("[contact-form-7 id=\"86\" title=\"Contact form 1\" html_class=\"form-group\"]"); ?>
      
         
      </div>
    </div>

        
 <div class="modal-fade" id="submitModal" tabindex="-1" role="dialog" aria-labelledby="submitModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="submitModalLabel">Success!</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          Thanks for reaching out! We'll reply within 1-2 business days.
        </div>
        <div class="modal-footer">
          <a button type="button" href="https://deltadesigns.co/" class="btn btn-primary">Back to Home</button></a>
        </div>
      </div>
    </div>
  </div>

        
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
 <script src="https://code.jquery.com/jquery-3.6.0.slim.js" integrity="sha256-HwWONEZrpuoh951cQD1ov2HUK5zA5DwJ1DNUXaM6FsY=" crossorigin="anonymous"></script>
      

    
<?php add_action( 'wp_footer', 'mycustom_wp_footer' );
function mycustom_wp_footer() {
?>
      <script type="text/javascript">
    
         document.addEventListener( 'wpcf7mailsent', function( event ) {
         if ( '86' == event.detail.contactFormId ) { // Change 123 to the ID of the form 
         jQuery('#submitModal').modal('show'); //this is the bootstrap modal popup id
       }
        }, false );
         </script>
       <?php  } ?>
      
<script type="text/javascript">
    
    document.querySelector('.close').addEventListener('click',
    function(){
        document.querySelector('.modal-fade').style.display='none';
    });

</script>




<?php
get_footer();
?>

以下是模式页脚中的错误：

和标记将合并到代码中

试试这个：

<div class="modal-footer">
      <a href="https://deltadesigns.co/"><button type="button" class="btn btn-primary">Back to Home</button></a>
</div>

---

问题是jquery函数、bootstrap或wordpress可能添加了一个我没有想到要查找的模态背景元素，并且类的Z索引设置得比所有其他元素都高。

---

一旦我将其更改为低于弹出窗口，一切都很好。

这些按钮工作正常。可以按CTRL+F5组合键并重试吗？

<div class="modal-footer">
      <a href="https://deltadesigns.co/"><button type="button" class="btn btn-primary">Back to Home</button></a>
</div>