bootstrap modal關閉的方法:1、連接好bootstrap的插件;2、給按鈕綁定模態框事件;3、透過「 $('#myModal').modal('hide'); 」方法手動關閉模態框即可。
本教學操作環境:Windows7系統、bootsrap3.3.7版,Dell G3電腦,此方法適用於所有品牌電腦。
bootstrap modal手動關閉的方法:
#關於模態框的寫法:
在bootstrap的官方文件就有模態框的寫法。 bootstrap真心好用也很方便!
下面黏出來我的程式碼
首先得連接好bootstrap的插件,在html頁面上連接上這兩個套件
# #之後就是程式碼部分:給按鈕綁定了模態框事件<button class="btn btn-primary btn-lg btn_add" style="max-width:90%" 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" style="width: 300px;margin: 0 auto"> <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"> <!-- 在这里添加一些文本 自定义内容--> <form> <!-- 在这里添加一些文本 自定义内容--> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button> <button type="button" class="btn btn-primary btn_check">提交</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --> </div>這樣就完成囉!如圖,程式碼裡面我把我的資訊給刪了,有的加上了註解: #模態框手動關閉:想實現點擊之後判斷成功再讓模態框消失的操作之前在網上翻的有很多方法,看起來並不容易,也並不能解決我的問題試了display: none的方法,但會影響下次的模態框出現之後偶爾看到了這個$('#myModal').modal('hide');把這一句加在你想讓模態框關閉的地方就可以手動關閉模態框了,這個方法很完美的解決了我的問題。 文件還是要多看,文檔的的基礎方法還是很有用的 #希望能幫到跟我一樣的人 #推薦:《
以上是bootstrap modal 如何關閉的詳細內容。更多資訊請關注PHP中文網其他相關文章!