如何让Twitter Bootstrap Popover始终打开?

hts6caw3  于 11个月前  发布在  Bootstrap
关注(0)|答案(4)|浏览(146)

我想使Twitter的引导弹出窗口,当文件加载,是永远开放。我看到一些解决方案,但他们显示弹出窗口clickhover
这是我的代码:

$("#min-allowed-price .bar-label-shape").popover({
    offset: 10,
    trigger:'manual'
    });

字符串

qyswt5oh

qyswt5oh1#

一种方法是手动显示弹出框,然后删除弹出框链接的click事件处理程序。

$('.popover-visible-trigger')
    .popover('show')
    .off('click');

字符串
查看工作jsfiddle
不过,问题是,也许你不需要这样做。如果你想让弹出框一直显示,为什么不把它添加到标记中呢?

gr8qqesn

gr8qqesn2#

我想让Twitter的引导弹出窗口,当文件加载

$(document).ready(function() {
    $("button").popover("show");
});

字符串
永远开放。
disabled属性添加到按钮或hide.bs.popover event上的preventDefault()

$('button').on('hide.bs.popover', function (e) {
  e.preventDefault();
});


jsfiddle

ih99xse1

ih99xse13#

你并没有真正触发弹出框。你可以通过调用popover('show')来做到这一点:

$("#min-allowed-price .bar-label-shape").popover({
  offset: 10,
  trigger:'manual'
}).popover('show');

字符串
Bootstrap的Popover文档:

.popover('show')

显示元素的弹出框。在弹出框实际显示之前(即在showed.bs.popover事件发生之前)返回给调用方。这被认为是弹出框的“手动”触发。标题和内容都为零长度的弹出框永远不会显示。

$('#element').popover('show')

ih99xse1

ih99xse14#

Bootstrap 5保持popover始终可见的示例:

  • 在点击时
// initialize popovers
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => {
  // prevent hiding each popover
  popoverTriggerEl.addEventListener('hide.bs.popover', (event) => {
    event.preventDefault();
  });
  return new bootstrap.Popover(popoverTriggerEl);
});

个字符

  • 立即(启动后自动显示)
// initialize popovers
const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]');
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => {
  // prevent hiding each popover
  popoverTriggerEl.addEventListener('hide.bs.popover', (event) => {
    event.preventDefault();
  });
  const popoverEl = new bootstrap.Popover(popoverTriggerEl);
  popoverEl.show();
  return popoverEl;
});
<button type="button" class="btn btn-lg btn-danger mt-5 ms-5" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>

相关问题