Jquery 模态未出现在成功表单提交上

Question

我正在尝试创建一个简单的模式，当用户在我的 WordPress 网站上成功提交联系 7 表单时将出现该模式。 虽然提交成功，但没有出现引导模式。 可在Delta Designs 联系页面查看

我收到的错误如下，但我不确定它指的是哪里，因为一切似乎都井然有序。 我让它工作，但似乎无法找到我坏了什么。

感谢您的任何帮助！

Uncaught SyntaxError: Unexpected token '<'

引导模式

  <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">
          <h3 class="modal-title" id="submitModalLabel">Success!</h3>
          <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 href="https://deltadesigns.co/"><button type="button" class="btn btn-primary">Back to Home &raquo;</button></a>
        </div>
      </div>
    </div>
  </div>

<script type="text/javascript">

  <?php add_action('wp_footer', 'mycustom_wp_footer');
  function mycustom_wp_footer()
  {
  ?>

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


<?php  } ?>
</script>

<script type="text/javascript">
  document.querySelector('.close').addEventListener('click',
    function() {
      document.querySelector('.modal-fade').style.display = 'none';
    });
</script>

Answer 1

您在第 3 行到最后一行写了 querySelector，但没有指定 select 的位置：）

Answer 2

尝试改变这个：

<script type="text/javascript">

  <?php add_action('wp_footer', 'mycustom_wp_footer');
  function mycustom_wp_footer()
  {
  ?>

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

  <?php add_action('wp_footer', 'mycustom_wp_footer');
  function mycustom_wp_footer()
  {
  ?>

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

<?php  } ?>
</script>

您的结束脚本标签应位于 PHP function 的外侧，因为开口也在外侧。 发生的事情是您在另一个开始 <script <script>标记内有一个开始<script>标记