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