Question

是否有示例如何像在Modal组件上一样在Bootstrap 4.21 popover上产生良好的淡入淡出效果？我尝试将“ fade”类添加到popover，但没有帮助。基本上，我需要弹出框具有焦点并且背景是灰色的，就像它在模式对话框中一样。谢谢。

Answer 1

我只是遵循模型规则，通过检查元素可以在link中看到。

说明

显示弹出框时，我在一个div元素上添加了一些CSS，整个body都呈灰色，并且在隐藏弹出框后，我还原了所有更改。

我在点击时在按钮上添加了position absolute和z index，因为它的高亮按钮使其可点击。

$('#mypop').popover();

$('#mypop').on('show.bs.popover', function () {
  $('.example').addClass('popoverCSS');
  $(this).addClass('popoverBtnCSS');
});
$('#mypop').on('hide.bs.popover', function () {
  $('.example').removeClass('popoverCSS');
  $(this).removeClass('popoverBtnCSS');
});

.popoverCSS {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
}
.popoverBtnCSS {
  position: absolute;  /* you can use position: fixed also */
  z-index: 1;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">

<button type="button" id="mypop" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover </button>
<div class="example"></div>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>

如果发现与此答案有关的任何问题，请在下面评论。

Answer 2

一种无需任何自定义CSS的简便方法就是添加以下JavaScript，以在弹出框的显示/隐藏位置插入/删除“ modal-backdrop”元素。

$('[data-toggle="popover"]').popover();
$('[data-toggle="popover"]').on('show.bs.popover', function () {
    $("body").append("<div class='modal-backdrop fade show'></div>")
});
$('[data-toggle="popover"]').on('hide.bs.popover', function () {
    $(".modal-backdrop").remove();
});

Bootstrap 4 Popover具有淡入淡出效果吗？

2 个答案: