這篇文章給大家分享的是有關bootstrap modal手動關閉的方法的內(nèi)容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)專業(yè)為企業(yè)提供河北網(wǎng)站建設、河北做網(wǎng)站、河北網(wǎng)站設計、河北網(wǎng)站制作等企業(yè)網(wǎng)站建設、網(wǎng)頁設計與制作、河北企業(yè)網(wǎng)站模板建站服務，十多年河北做網(wǎng)站經(jīng)驗，不只是建網(wǎng)站，更提供有價值的思路和整體網(wǎng)絡服務。

bootstrap modal關閉的方法：首先連接好bootstrap的插件；然后給按鈕綁定模態(tài)框事件；最后通過“ $('#myModal').modal('hide');”方法手動關閉模態(tài)框即可。

bootstrap modal手動關閉的方法：

關于模態(tài)框的寫法：

在bootstrap的官方文檔就有模態(tài)框的寫法。bootstrap真心好用也很方便！

下面粘出來我的代碼

首先得連接好bootstrap的插件，在html頁面上連接上這兩個包

之后就是代碼部分：

給按鈕綁定了模態(tài)框事件

<button class="btn btn-primary btn-lg btn_add" style="display: block;" data-toggle="modal" data-target="#myModal">
一個按鈕
</button>

模態(tài)框：

<!-- 模態(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" style="width: 300px;margin: 0 auto">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <h5 class="modal-title" id="myModalLabel">
                    <!-- 模態(tài)框（Modal）標題 -->         
                </h5>
            </div>
            <div class="modal-body"> 
                <!-- 在這里添加一些文本 自定義內(nèi)容-->
                <form>
                 <!-- 在這里添加一些文本 自定義內(nèi)容-->
                </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>

這樣就完成啦！如圖，代碼里面我把我的信息給刪了，有的加上了注釋：

模態(tài)框手動關閉：

想實現(xiàn)點擊之后判斷成功再讓模態(tài)框消失的操作

之前在網(wǎng)上翻的有很多方法，看起來并不容易，也并不能解決我的問題

試了display：none的方法，但是會影響下次的模態(tài)框出現(xiàn)

之后偶爾看到了這個 $('#myModal').modal('hide')；把這一句加在你想讓模態(tài)框關閉的地方

就可以手動關閉模態(tài)框了，這個方法很完美的解決了我的問題。

文檔還是要多看，文檔的的基礎方法還是很有用的

感謝各位的閱讀！關于bootstrap modal手動關閉的方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網(wǎng)頁題目：bootstrapmodal手動關閉的方法
分享鏈接：http://chinadenli.net/article20/iegsco.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、商城網(wǎng)站、虛擬主機、網(wǎng)站改版、微信公眾號、標簽優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)