时间戳

首页 > 解决方案 > 如何将按钮添加到引导弹出窗口？

javascript - 如何将按钮添加到引导弹出窗口？

问题描述

我希望按钮出现在弹出框内。这里的问题是 html 代码出现而不是弹出框内的按钮。我认为这段代码有问题： $('[data-bs-toggle="popover"]').popover('show');

如何在弹出框内添加带有按钮标签的按钮而不将 data-bs-toggle 更改为 data-toggle？

    <!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    
        <!-- Bootstrap CSS -->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
      </head>
      <body>
        <div class="container">
    <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover" id="example">  Popover on bottom
    </button>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    
    
    <script>
       var popString = "";
       popString = popString + "<a href='#'><button class='btn btn-primary' id ='checkout'>Checkout</button></a> <button class='btn btn-primary' id ='clearCart'>Clear Cart</button>     "
     
       document.getElementById('example').setAttribute('data-bs-content', popString);
    
        $(document).ready(function(){
          $('[data-bs-toggle="popover"]').popover('show');
    });</script>
        <!-- Option 1: Bootstrap Bundle with Popper -->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    
      </body>
    </html>

标签： javascripthtmljquerycsspopover

解决方案

<script>
   $(document).ready(function(){
      $('[data-toggle="popover"]').popover({
      placement : 'top',
      html : true,
      title : 'User Info <a href="#" class="close" data-dismiss="alert">&times; 
      </a>',
       content : '<div class="media"><img src="images/avatar-tiny.jpg" 
       class="mr-3" alt="Sample Image"><div class="media-body"><h5 class="media- 
        heading">Jhon Carter</h5><p>Excellent Bootstrap popover! I really love 
        it.</p></div></div>'
     });
     $(document).on("click", ".popover .close" , function(){
     $(this).parents(".popover").popover('hide');
  });
  });
 </script>



<div class="wrapper">
    <button type="button" class="btn btn-primary" data-toggle="popover">Click 
    Me</button>
</div>

推荐阅读