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

成都創(chuàng)新互聯(lián)公司長期為近1000家客戶提供的網站建設服務，團隊從業(yè)經驗10年，關注不同地域、不同群體，并針對不同對象提供差異化的產品和服務；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網生態(tài)環(huán)境。為固陽企業(yè)提供專業(yè)的成都做網站、網站制作，固陽網站改版等技術服務。擁有十年豐富建站經驗和眾多成功案例,為您定制開發(fā)。

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"> 
                <!-- 在這里添加一些文本 自定義內容-->
                <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>

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

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

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

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

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

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

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

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

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

網頁名稱：bootstrapmodal手動關閉的方法-創(chuàng)新互聯(lián)
文章起源：http://www.chinadenli.net/article26/dcccjg.html

成都網站建設公司_創(chuàng)新互聯(lián)，為您提供App設計、外貿建站、Google、動態(tài)網站、響應式網站、靜態(tài)網站

廣告

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