时间戳

首页 > 解决方案 > 延迟后如何让引导模式在特定的 WordPress 页面上弹出

javascript - 延迟后如何让引导模式在特定的 WordPress 页面上弹出

问题描述

在 WordPress 延迟 2 秒后，我试图让 Bootstrap 4 模态在 Order Received 页面上弹出。我是主题定制的新手。这就是我所拥有的，但我无法在页面上打印 HTML。

我想挂钩：do_action( 'woocommerce_before_thankyou', $order->get_id() ); ?>on thankyou.php。我还希望模式在页面加载时弹出。我为此找到的 JS 将是：

<script type="text/javascript">
    $(window).on('load',function(){
        $('#exampleModal').modal('show');
    });
</script>

在Thankyou 页面正文类中，它显示page-id-8为页面ID。

在我的functions.php文件中，我有以下内容：

问题：

  1. 由于某种原因，HTML 未在页面上打印。关于我还能做什么的任何想法？
  2. <script></script>在同一页面上添加标签以添加setTimeout延迟它的功能的下一步是什么？

代码：

function create_modal() {
 if(is_single('8')) {
     echo '
     <!-- Modal -->
     <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
           <div class="modal-header">
             <h5 class="modal-title" id="exampleModalLabel">A NOTE ON SHIPPING</h5>
             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
               <span aria-hidden="true">&times;</span>
             </button>
           </div>
           <div class="modal-body">
             <p>Thank you so much for your order! As we\'re sure you\'re aware, we are a little backed up due to COVID-19.</p> 
     
             <p>While we work hard to get your order out in a timely manner, we sincerely appreciate your understanding and patience.</p>
     
             <p>When your order ships, you\'ll receive an email with tracking information attached. Please keep an eye out for your package. Also note that FedEx and USPS are also backed up due to COVID-19, and delivery times may also be delayed.</p>
           </div>
           <div class="modal-footer">
             <button type="button" class="btn" data-dismiss="modal">CLOSE</button>
             <!-- <button type="button" class="btn btn-primary">Save changes</button> -->
           </div>
         </div>
       </div>
     </div>';
 }
}

add_action('woocommerce_thankyou_', 'create_modal', 10);

标签： javascriptphpwordpressbootstrap-4bootstrap-modal

解决方案

推荐阅读