如何向引导弹出窗口添加按钮？

Question

如何向引导弹出窗口添加按钮？

Nii*_*esh 8 html javascript css jquery popover

我希望按钮出现在弹出窗口内。这里的问题是 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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ama*_*dan 3

$(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();
    }
  });
});

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	5 年，1 月前
查看次数：	6387 次
最近记录：	5 年，1 月前