我正在嘗試在單擊和懸停事件上顯示引導彈出視窗。
我在一個頁面上加載了多個控制元件，我正在嘗試系結 bootstrap-5 彈出框，而不需要這些控制元件的 jQuery 依賴項。
在此示例中，我使用了按鈕和錨元素，并嘗試使用 JavaScript 系結彈出框，當使用事件懸停（觸發器：'懸停'）時，按鈕和錨元素都會觸發彈出框，但對于事件 click(觸發器：'focus'）彈出框未顯示錨元素。
我使用下面的代碼將事件系結到控制元件。
document.addEventListener("DOMContentLoaded", function(event) {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'focus',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="hover-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'hover',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
});<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<button type="button" class="btn btn-primary" people-card="click-action" email="[email protected]">
Show Card on Click
</button>
<button type="button" class="btn btn-primary" people-card="hover-action" email="[email protected]">
Show Card on Hover
</button>
<br>
<br>
<ul>
<li>
<a class="people-card" people-card="click-action" email="[email protected]">Show Card on Click</a>
</li>
<li>
<a class="people-card" people-card="hover-action" email="[email protected]">Show Card on Hover</a>
</li>
</ul>
<br>
<br>
<button type="button" class="btn btn-primary" people-card="click-action" email="[email protected]">
Show Card on Click
</button>
<button type="button" class="btn btn-primary" people-card="hover-action" email="[email protected]">
Show Card on Hover
</button>
<div id="popover-content" style="display:none">
<p>test</p>
</div>有人可以在這里幫助我使點擊事件（觸發器：'focus'）甚至適用于錨標簽。
uj5u.com熱心網友回復：
href因此，添加屬性似乎解決了這個問題。show或者，您可以在單擊元素時使用工具提示的方法自己觸發它。
如果需要，不要忘記 preventDefault() 。
document.addEventListener("DOMContentLoaded", function(event) {
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="click-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'focus',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
var popoverTriggerList = [].slice.call(document.querySelectorAll('[people-card="hover-action"]'));
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl, {
container: 'body',
html: true,
trigger: 'hover',
//tabIndex: -1,
content: function() {
//console.log(this.getAttribute("email"));
return document.getElementById('popover-content').outerHTML;
}
})
});
});<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
<ul>
<li>
<a href="#" class="people-card" people-card="click-action" email="[email protected]">Show Card on Click</a>
</li>
<li>
<a class="people-card" people-card="hover-action" email="[email protected]">Show Card on Hover</a>
</li>
</ul>
<div id="popover-content" style="display:none">
<p>test</p>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/512252.html
標籤：javascript推特引导引导程序 5弹出框引导弹出窗口
上一篇：如何將串列項保持在同一行？