1

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

我尝试在我的页面上有模态示例代码

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

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

我将不胜感激有关该主题的任何想法，因为它似乎没有在任何地方出现。

4

3 回答 3

2

嗯，在我看到人们使用 jQuery() 的其他示例中，“选项”参数也可能是未定义的。试试这个：

 on_sent_ok: "jQuery('#myModal').modal()"
于 2013-12-02T08:00:51.133 回答
0

注意：on_sent_ok 和 on_submit已从 Contact Form 7 5.0中正式删除。您可以使用 DOM 事件来代替这些设置。

于 2019-10-17T11:47:35.490 回答
0

将此代码放在 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  } ?>
于 2020-05-28T10:09:24.467 回答