关闭按钮在引导5弹出窗口和关闭弹出窗口在主体点击

Question

我需要关闭弹出窗口按钮点击里面的data-bs-content在引导5弹出窗口也没有功能的弹出窗口关闭身体点击。

下面是我的代码

$(document).ready(function() {
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})


});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<a href="javascript:void(0)" class="btn  btn-primary ripple-effect m-4" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="left" data-bs-content="<a href='javascript:void(0)' class='d-flex justify-content-end close-popover' aria-label='Close'><div class='icon icon-16 icon-lg-16 mb-2'>X</div></a><div  class='sec-paragraph'><div class='p4'><p>Lorem ipsum dolor sit amet, consectetur apising elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim.</p></div> </div>">Popover(White) left with close btn</a>

JS

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

HTMl

<a href="javascript:void(0)" class="btn  btn-default ripple-effect m-4" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="left" data-bs-content="<a href='javascript:void(0)' class='d-flex justify-content-end close-popover' aria-label='Close'><div class='icon icon-16 icon-lg-16 mb-2'><img src='resources/img/svg-icons/icon-close-grey.svg' alt='popover close icon'></div></a><div  class='sec-paragraph'><div class='p4'><p>Lorem ipsum dolor sit amet, consectetur apising elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim.</p></div> </div>">Popover(White) left with close btn</a>

如果我们按照他们的文档使用隐藏函数，那么我们就不能重新打开弹出窗口，检查下面的代码

$(document).ready(function() {
// popover
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})


$(document).on("click", ".popover .close-popover" , function(){
$(this).closest(".popover").hide();
});

});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<a href="javascript:void(0)" class="btn  btn-primary ripple-effect m-4" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="left" data-bs-content="<a href='javascript:void(0)' class='d-flex justify-content-end close-popover' aria-label='Close'><div class='icon icon-16 icon-lg-16 mb-2'>X</div></a><div  class='sec-paragraph'><div class='p4'><p>Lorem ipsum dolor sit amet, consectetur apising elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim.</p></div> </div>">Popover(White) left with close btn</a>

Answer 1

由于某些原因，hide()似乎没有正确地切换元素，因为它改变了所有弹出窗口元素(新旧)的样式。经过实验和网上搜索，我用popover('hide')代替hide()使其工作。

$(document).ready(function() {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
$(document).on("click", ".popover .close-popover" , function(event){
$(this).closest(".popover").popover('hide');
});
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>
<a href="javascript:void(0)" class="btn  btn-primary ripple-effect m-4" data-bs-toggle="popover" data-bs-html="true" data-bs-placement="left" data-bs-content="<a href='javascript:void(0)' class='d-flex justify-content-end close-popover' aria-label='Close'><div class='icon icon-16 icon-lg-16 mb-2'>X</div></a><div  class='sec-paragraph'><div class='p4'><p>Lorem ipsum dolor sit amet, consectetur apising elit, sed do eiusmod tempor incididut ut labore et dolore magna aliqua. Ut enim ad minim.</p></div> </div>">Popover(White) left with close btn</a>