我想使Twitter的引导弹出窗口,当文件加载,是永远开放。我看到一些解决方案,但他们显示弹出窗口click或hover!这是我的代码:
click
hover
$("#min-allowed-price .bar-label-shape").popover({ offset: 10, trigger:'manual' });
字符串
qyswt5oh1#
一种方法是手动显示弹出框,然后删除弹出框链接的click事件处理程序。
$('.popover-visible-trigger') .popover('show') .off('click');
字符串查看工作jsfiddle。不过,问题是,也许你不需要这样做。如果你想让弹出框一直显示,为什么不把它添加到标记中呢?
gr8qqesn2#
我想让Twitter的引导弹出窗口,当文件加载
$(document).ready(function() { $("button").popover("show"); });
字符串永远开放。将disabled属性添加到按钮或hide.bs.popover event上的preventDefault()
disabled
hide.bs.popover event
preventDefault()
$('button').on('hide.bs.popover', function (e) { e.preventDefault(); });
型jsfiddle
ih99xse13#
你并没有真正触发弹出框。你可以通过调用popover('show')来做到这一点:
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')
型
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>
4条答案
按热度按时间qyswt5oh1#
一种方法是手动显示弹出框,然后删除弹出框链接的click事件处理程序。
字符串
查看工作jsfiddle。
不过,问题是,也许你不需要这样做。如果你想让弹出框一直显示,为什么不把它添加到标记中呢?
gr8qqesn2#
我想让Twitter的引导弹出窗口,当文件加载
字符串
永远开放。
将
disabled
属性添加到按钮或hide.bs.popover event
上的preventDefault()
型
jsfiddle
ih99xse13#
你并没有真正触发弹出框。你可以通过调用
popover('show')
来做到这一点:字符串
Bootstrap的Popover文档:
.popover('show')
显示元素的弹出框。在弹出框实际显示之前(即在showed.bs.popover事件发生之前)返回给调用方。这被认为是弹出框的“手动”触发。标题和内容都为零长度的弹出框永远不会显示。
型
ih99xse14#
Bootstrap 5保持popover始终可见的示例:
个字符