bootstrap modal手動關(guān)閉的方法

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

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

bootstrap modal手動關(guān)閉的方法：

關(guān)于模態(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）標(biāo)題 -->         
                </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">關(guān)閉</button>
                <button type="button" class="btn btn-primary btn_check">提交</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>

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

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

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

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

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

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

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

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

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