Bootstrap入門（二十九）JS插件6：彈出框

加入小覆蓋的內(nèi)容，像在iPad上，用于存放非主要信息

彈出框是依賴于工具提示插件的，那它也和工具提示是一樣的，是需要初始化才能夠使用的

首先我們引入CSS文件和JS文件

<link href="bootstrap.min.css" rel="stylesheet"> <script src="jquery-3.1.0.min.js" type="text/javascript"></script><script src="bootstrap.min.js" type="text/javascript"></script>

首先我們來創(chuàng)建幾個按鈕來作為觸發(fā)

<div class="container"><button type="button" class="btn btn-default js-popover" data-toggle ="popover" data-placement="bottom" title="標題" data-content="內(nèi)容">彈出框1</button></div>

他的使用還需要我們在添加js代碼（初始化）

（注意，這里索引的是class里面的）

<script>$(".js-popover").popover();</script>

打開頁面，點擊按鈕

我們也有另外的方向，只要把data-placement="bottom"里面的bottom改為left、right、top就可以了（默認是左側(cè)）

?這種情況下是點擊按鈕出現(xiàn)，點擊按鈕消失，有時候，我們想按空白處讓它消失怎么辦呢？

只需要在按鈕的屬性中添加一個新屬性data-trigger="focus"就可以了

<div class="container"><button type="button" class="btn btn-default js-popover" data-toggle ="popover" data-placement="bottom" title="標題" data-content="內(nèi)容" data-trigger="focus">彈出框1</button></div>

刷新頁面，點擊按鈕，內(nèi)容出現(xiàn)，點擊空白處，消失。

?

其實這是默認有一個過度效果的，如果我們想要合格效果消失（也就是突然彈出突然消失），可以繼續(xù)添加屬性data-animation="false"就可以了

有時候我們希望當網(wǎng)頁展示的時候就顯示出來，可以修改js代碼

<script>$(".js-popover").popover('show');</script>

?

和其他js插件一樣，他有四種情況，出現(xiàn)前，出現(xiàn)后，隱藏前，隱藏后

嘗試最簡單的彈出提示框，這里是隱藏后

修改js代碼

<script>$(".js-popover").on("hidden.bs.popover",function(e){alert("hello");});</script>

刷新頁面，點擊按鈕，讓彈出框消失后，提示hello

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/hnnydxgjj/p/5917915.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的Bootstrap入门（二十九）JS插件6：弹出框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。