如何向Bootstrap的弹出框（popover）中添加按钮？

Question

如何向Bootstrap的弹出框（popover）中添加按钮？

5

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

如何在弹出框内添加带有 button 标签的按钮，而不改变 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>

- Niiteesh

5个回答

1

你还需要添加 data-bs-html="true" 属性，以便在弹出框中运行 HTML 代码。
我尝试了你的代码，但据我观察弹出框内的按钮无法工作，但锚点可以。我个人不喜欢这种方法，但这是我现在能使其工作的方法。这里有一个 JSFiddle：JSFiddle 它基本上意味着把你内容中的按钮转换为锚点。

- Siddharth Bhansali

0

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

- Arun Guru

0

<!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"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <button
      type="button"
      class="btn btn-lg btn-danger"
      data-bs-toggle="popover"
      title="Popover title"
      data-bs-content="And here's some amazing content. It's very engaging. Right?"
    >
      Click to toggle popover
    </button>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- 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>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->

    <script>
      var popoverTriggerList = [].slice.call(
        document.querySelectorAll('[data-bs-toggle="popover"]')
      );
      var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl);
      });
    </script>
  </body>
</html>

当您使用Bootstrap 5时，使用此脚本代码，您可以轻松制作弹出框。
您也可以尝试使用jQuery，但我认为这不是必需的。

- Md Atiqur

谢谢回复。我想将弹出窗口的内容更改为HTML按钮，但似乎在这里无法实现。 - Niiteesh

-1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script>

<div class="container"><a href="#" data-toggle="popover" title="Popover Header" data-content="Popover Contents">Popover Example</a></div>

$(document).ready(function(){$('[data-toggle="popover"]').popover();});

- Arun Guru

1

欢迎来到StackOverflow！请解释您的解决方案。 - Jonathan

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Amal nandan · Accepted Answer

$(function() {
  $("[data-toggle=popover]").popover({
    html: true,
    placement:"bottom",
    content: function() {
      var content = $(this).attr("data-popover-content");
      return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    }
  });
});

body{
width100%;
height:100vh
}
.flex-center{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="flex-center">
<button class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a2">Popover Example</button>
</div>



<div id="a2" class="hidden">
  <div class="popover-heading">This is the heading for #2</div>

  <div class="popover-body">
  This is the body for #2<br> With <b>html</b> content
  <button class="btn btn-primary mx-auto">Button</button>
  </div>
</div>