Question

我有一个基于Bootstrap的主题，我希望Contact Form 7的成功消息触发Bootstrap Modal（即“弹出窗口”）。

我尝试在我的页面上使用Modal示例代码

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
          </div>
          <div class="modal-body">
            ...
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

我认为它可以通过将以下字符串放在联系表格7的“附加设置”中来实现：

on_sent_ok: "$('#myModal').modal(options)"

不幸的是，这不会产生任何明显的效果。只是正常的成功消息似乎被抑制（它没有显示）。

我会很感激有关这个主题的任何想法，因为它似乎没有任何特色。

Answer 1

嗯，在其他例子中，我看到人们使用jQuery（），“options”参数也可能是未定义的。试试这个：

 on_sent_ok: "jQuery('#myModal').modal()"

Answer 2

注意：on_sent_ok和on_submit已officially从联系表7 5.0中删除。您可以使用DOM事件代替这些设置。

Answer 3

将此代码放在function.php中，以在表单提交后显示模式。请记住设置您的表单ID。

 <?php add_action( 'wp_footer', 'mycustom_wp_footer' );
    function mycustom_wp_footer() { ?>
     <script type="text/javascript">
         document.addEventListener( 'wpcf7mailsent', function( event ) {
         if ( '34' == event.detail.contactFormId ) { // Change 123 to the ID of the form 
         jQuery('#myModal').modal('show'); //this is the bootstrap modal popup id
       }
        }, false );
         </script>
       <?php  } ?>

使联系表单7触发引导模式

3 个答案: