前言：

這是我的第四篇垃圾博文，前三篇目前看來只有13次瀏覽量，我自己看的好像就佔了一大半，不過還是要不要臉的寫下去；

正文：

問題：我們作為後臺開發人員，經常會做一些表單提交，最常見的是對資料庫的的增刪改查，大部分同學做修改的增加的時候都會選擇重新跳轉到一個新的頁面，這樣既不簡潔又不高大上，bootstrap模態框完美的解決掉這個問題；

第一步，引入bootstrap的cs和js

第二步，例項展示：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">開啟示例視窗</button>
 

首先我們可以看到這個botton按鈕有兩個屬性是data-toggle="model"   data-target="#myModel"；第一個屬性代表我可以調取並展示一個模態框，第二個屬性表示我要展示的哪一個模態框，用id來標識。

接下來介紹一下具體怎樣調取哪一個模態框，以及模態框出現的效果是怎麼的；

<div class="modal inmodal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">
           <div class="modal-dialog">
                 <div class="modal-content animated bounceInRight">
                       <div class="modal-header">
                             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">關閉</span>
                              </button>
                                  <i class="fa fa-laptop modal-icon"></i>
                                  <h4 class="modal-title">視窗標題</h4>
                                  <small class="font-bold">這裡可以顯示副標題。
                             </small></div><small class="font-bold">
                    <div class="modal-body">
                     <p><strong>H+</strong> 是一個完全響應式，基於Bootstrap3.4.0最新版本開發的扁平化主題，她採用了主流的左右兩欄式佈局，使用了Html5+CSS3等現代技術，她提供了諸多的強大的可以重新組合的UI元件，並集成了最新的jQuery版本(v2.1.1)，當然，也集成了很多功能強大，用途廣泛的jQuery外掛，她可以用於所有的Web應用程式，如網站管理後臺，網站會員中心，CMS，CRM，OA等等，當然，您也可以對她進行深度定製，以做出更強系統。</p>
                        <div class="form-group"><label>Email</label> <input type="email" placeholder="請輸入您的Email" class="form-control"></div>
                              </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-white" data-dismiss="modal">關閉</button>
                                            <button type="button" class="btn btn-primary">儲存</button>
                                        </div>
                                    </small></div><small class="font-bold">
                                </small></div><small class="font-bold">
                            </small></div>
 

點選botton按鈕調取下面的模態框，第一點需要.inmodal類（首行程式碼中的inmodal-class），第二點需要一個botton中定義好的id（myModal）；這兩點就可以實現了；

模態框慢慢浮現效果：最外層div需要新增一個class為fade程式碼展示

<div class="modal inmodal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="display: none;">

模態框的大小取決於下一層div(第二層)的class：

.modal-dialog modal-lg   .modal-dialog modal-sm  .modal-dialog分別為大、小、中
 

 模態框動畫效果取決下一層div（第三層）的class；

modal-content animated bounceInRight   右邊滑出效果                                                          

modal-content animated flipInY  沿x軸旋轉效果

modal-content animated fadeIn   浮現效果

多的不說了，大家嘗試一下就好了，很簡單的；

後續

第一件事我想說給華為做外包的是真的坑啊，華為那邊的人個個都是大爺，每天愛答不理的，總把自己擺在高高位置上，對你是牛逼，但我們也是有尊嚴的，我發誓呆一年走人，生氣；第二件事明天就要高考了，好開心啊，每到這時候就想起自己高考的那個時候，是真的慘，頂著30,40度的高溫，吃不好睡不好，那兩天真是撐過去的。今天下雨了，估計明天會是一個好天氣吧，祝莘莘學子凱旋；四年之後來找我敲程式碼哈，開心；