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

彈出框

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

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

參考 《CSS高效開發實戰》 P181