bootstrap怎么彈出窗口
3 回答
守著一只汪
TA貢獻1872條經驗 獲得超4個贊
彈出窗口，你說的應該是模態框吧。
示例代碼如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <h2>創建模態框（Modal）</h2><!-- 按鈕觸發模態框 --><button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">開始演示模態框</button><!-- 模態框（Modal） --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="myModalLabel">模態框（Modal）標題</h4> </div> <div class="modal-body">在這里添加一些文本</div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button> <button type="button" class="btn btn-primary">提交更改</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div> |
子衿沉夜
TA貢獻1828條經驗 獲得超3個贊
使用jquery更改bootstrap彈出框的內容，可以使用Jquery的load()方法，動態加載不同的模態框（彈出框）內容，然后填充到頁面的彈出框div中：
主頁面只保留彈出框最外面的那個div
1 | <div class="modal fade" id="myModal"> </div> |
動態加載的彈出框內容頁面中包括bootstrap模態框中的head、body和footer部分
1 2 3 4 5 6 7 8 9 | <div class="modal-header"> <h3>模態框header </h3> </div> <div class="modal-body"> <p>模態框body</p> </div> <div class="modal-footer"> <p>模態框footer</p> </div> |
利用jquery的load()方法，在點擊不同的按鈕時動態先動態加載內容到模態框的div中，然后再讓bootstrap顯示
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> // 模態對話框隱藏時移除數據 $("#myModal").on("hidden", function() { $(this).removeData("modal"); }); // 顯示模態對話框 var showModal = function() { var remote = "/test/showModal"; if (remote != "") { $("#myModal").load(remote, function() { $("#myModal").modal('show'); }); }}; </script> |
其中showModal函數可以由按鈕控制。
- 3 回答
- 0 關注
- 1805 瀏覽
添加回答
舉報
0/150
提交
取消