溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

bootstrap4中怎么設(shè)置彈出框

發(fā)布時(shí)間：2021-07-23 14:15:30 來(lái)源：億速云 閱讀：128 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

本篇文章為大家展示了bootstrap4中怎么設(shè)置彈出框，內(nèi)容簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

如何創(chuàng)建彈出框

通過(guò)向元素添加 data-toggle="popover" 來(lái)來(lái)創(chuàng)建彈出框。

title屬性的內(nèi)容為彈出框的標(biāo)題，data-content 屬性顯示了彈出框的文本內(nèi)容：

<a href="#" data-toggle="popover" title="彈出框標(biāo)題" data-content="彈出框內(nèi)容">多次點(diǎn)我</a>

注意: 彈出框要寫(xiě) jQuery的初始化代碼里: 然后在指定的元素上調(diào)用popover()方法。

data-placement = {left | top | right | bottom | auto}設(shè)置彈出框的顯示位置，支持多種設(shè)置，比如data-placement="auto left"時(shí)，彈出窗盡可能顯示在左邊,在情況不允許的情況下它才顯示在右邊

以下實(shí)例可以在文檔的任何地方使用彈出框：

$(document).ready(function(){    $('[data-toggle="popover"]').popover(); });

完整代碼:

默認(rèn)情況下，彈出框在再次點(diǎn)擊指定元素后就會(huì)關(guān)閉，你可以使用 data-trigger="focus" 屬性來(lái)設(shè)置在鼠標(biāo)點(diǎn)擊元素外部區(qū)域來(lái)關(guān)閉彈出框。

<!DOCTYPE html><html><head>  <title>Bootstrap 實(shí)例</title>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width, initial-scale=1">  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>  <script src="https://cdn.staticfile.org/popper.js/1.12.5/umd/popper.min.js"></script>  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script></head><body><div class="container">  <h4>彈出框?qū)嵗?lt;/h4> <br>  <a href="#" title="取消彈出框" data-toggle="popover" data-trigger="focus" data-content="點(diǎn)擊文檔的其他地方關(guān)閉我">點(diǎn)我</a></div><script>$(document).ready(function(){    $('[data-toggle="popover"]').popover();   });</script></body></html>

上述內(nèi)容就是bootstrap4中怎么設(shè)置彈出框，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手