Блог

Я немного новичок в jquery.

В настоящее время у меня есть форма контакта 7 на wp, и я создал функцию ниже, чтобы иметь модальное всплывающее окно с успешной отправкой. Однако, хотя это работает так, как задумано, при появлении всплывающего режима экран становится немного темнее, и ни кнопка «вернуться домой», ни кнопка «закрыть» не будут работать — или что-либо еще на странице, если на то пошло.

Веб-сайт является 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">amp;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();
?>
 

Проблема заключалась в том, что функция jquery, возможно, bootstrap или wordpress добавили элемент модального фона, который я не думал искать, и Z-индекс класса был установлен выше, чем все остальные элементы. Как только я изменил его, чтобы он был ниже всплывающего окна, все было хорошо.

Вот ошибка в modal-footer :

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

<a> <button> Теги и объединяются в вашем коде.

Попробуйте это:

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