<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">點(diǎn)擊觸發(fā)模態(tài)對(duì)話框 </button><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal">&times;</button><h4 class="modal-title" id="myModalLabel">對(duì)話框標(biāo)題</h4></div><div class="modal-body">模態(tài)對(duì)話框示例</div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">Close</button><button type="button" class="btn btn-primary">Save changes</button></div></div></div> </div>

彈出框

有些時(shí)候,外面希望了解更多的內(nèi)容,這個(gè)時(shí)候,我們可以使用bootstrap提供的彈出框

<a href="javascript:void(0);" id="popover" class="btn btn-lg btn-danger" data-toggle="popover" data-content="采用了點(diǎn)擊事件觸發(fā),相比 Tooltip 可以顯示更多、更正式的內(nèi)容,并且可以配置更多樣式。"data-original-title="彈出框的應(yīng)用">點(diǎn)擊了解更多...</a><script>$("#popover").popover(); </script>// 注意,要使按鈕生效,一定要在結(jié)尾處,使用<script>標(biāo)簽中的內(nèi)容對(duì)popover()進(jìn)行激活

參考 《CSS高效開發(fā)實(shí)戰(zhàn)》 P181

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的bootstrap --- 弹出对话框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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