<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">點擊觸發(fā)模態(tài)對話框 </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">對話框標(biāo)題</h4></div><div class="modal-body">模態(tài)對話框示例</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>

彈出框

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

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

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

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

總結(jié)

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

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