如何解决如何向引导弹出窗口添加按钮？
我希望按钮出现在弹出框内。这里的问题是 html 代码出现而不是 popover 中的按钮。我认为这段代码有问题： $('[data-bs-toggle="popover"]').popover('show');
如何在不将 data-bs-toggle 更改为 data-toggle 的情况下，在 popover 内添加带有 button 标签的按钮？
<!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>解决方法
$(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>- 您还需要
data-bs-html="true"属性才能让 html 代码在弹出窗口中工作。 - 我试过你的代码，我知道弹出框内的按钮不起作用，但是锚标签是。我自己不喜欢这种方法，但这是我现在可以做的工作。这是一个小提琴：JSFiddle 这基本上意味着将内容中的按钮转换为锚标记。
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
placement : 'top',html : true,title : 'User Info <a href="#" class="close" data-dismiss="alert">×
</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>
<!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 时，使用此脚本代码您可以轻松制作 Popover。
- 或者您可以尝试使用 jquery，但我认为不需要。
<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();});
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。