Bootstrap 4 个弹出窗口 div

Question

我想在单击按钮时显示顶部 div 的弹出窗口。然后单击外部隐藏。 HTML:

<button class="pop-show" type="button">Show</button>

<div class="pop-inn">
    <p>content</p>
    <h5><img src="img.png" alt="image">Candidate</h5>
</div>

JS:

$(function(){
    // Enables popover
    $("[data-toggle=popover]").popover();
});

Answer 1

我假设您希望 pop-inn div 的内容成为您单击按钮时弹出窗口中显示的内容？

所以我在下面的工作代码段中做了一些更改。首先，要在弹出框外部单击时能够将其关闭，它必须是 <a> 标记，而不是 <button>，但您可以将链接样式设置为按钮（这就是我添加的原因btn btn-primary 类.)

然后我将一堆选项传递给.popover()方法。

html: true 告诉它它正在显示 html，而不是纯文本。
trigger: 'focus' 告诉它在您单击弹出框外部时关闭弹出框。
content: 告诉它在弹出窗口中放置什么。在这种情况下，我只是创建了一个函数来获取 pop-inn div 的 html 内容。（content选项需要使用函数return html，否则报错）

希望对您有所帮助！

$(function () {
  $(".pop-show").popover({
    html: true,
    trigger: "focus",
    content: function() {
      return $('.pop-inn').html();
    }
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>


<a class="pop-show btn btn-primary" tabindex="0" type="button" style="margin:100px;" data-toggle="popover" title="Your Popover Title" data-content="">Show</a>

<div class="pop-inn" style="display:none;">
    <p>content</p>
    <h5><img src="img.png" alt="image">Candidate</h5>
</div>

Bootstrap 4 个弹出窗口 div

Bootstrap 4 popover a div

jquery

popover

bootstrap-4