Bootstrap模態框怎么用

這篇文章主要為大家展示了Bootstrap模態框怎么用，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶大家一起來研究并學習一下“Bootstrap模態框怎么用”這篇文章吧。

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷，它還有一個響應最好的Grid系統，并且能夠在手機端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實現需要的幾乎任何類型的網站的功能，此外，所有這些組件都是響應式的。

一個最簡單的模態框由頭部、body和放在底部的按鈕，靜態模態框如下：

<p class="modal fade">  
<p class="modal-dialog">    
<p class="modal-content">      
<p class="modal-header">        
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;
</span></button>        
<h5 class="modal-title">模態框頭部</h5>      
</p>      <p class="modal-body">       
 <p>模態框主體部分</p>      
 </p>      
 <p class="modal-footer">        
 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>        
 <button type="button" class="btn btn-primary">保存</button>      
 </p>    
 </p><!-- /.modal-content -->  
 </p><!-- /.modal-dialog --></p><!-- /.modal -->

如果不想要動畫效果（在這里是淡入淡出的效果），可以把class的fade去掉即可。

modal-header類的p是頭部，我們可以在這里加上合適的頭部，也就是標題；modal-body類的p是主體內容，按需加入適當內容；modal-footer類的p是底部，一般是加上'關閉窗口'、'保存'或類似的內容。

demo中的'博主myvin的其他信息'彈出的模態框是這樣的：

要實現的模態框和上面的靜態模態框很相似，只是title、body和下面的一個button，因為是一個關閉的button，所以保留一個dismiss的data，即data-dismiss="modal"，表示這是一個具有關閉的button。直接貼出code：

<p class="modal fade" id="about" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
<p class="modal-dialog">        
<p class="modal-content">          
<p class="modal-header">            
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;
</span></button>            
<h5 class="modal-title" id="myModalLabel">博主myvin的其他信息</h5>          
</p>          
<p class="modal-body">            
<p>當愛情來得過于洶涌，我們該如何抉擇？</p>
<p>當情感在時間的浪潮里激情得澎湃，我們又該何去何從？</p>
<p>“不死鳥，不死鳥。”有太多的東西徘徊在我們的周身，或激情或蕭條，我們又該怎么權衡？</p>
<p>《不死鳥》，也許這里有你曾經經歷過的點點滴滴，也許有你即將經歷的枝枝葉葉。</p>
<p>然而在某些東西面前，愛情又是那么的脆弱......</p>
<p>攤開《不死鳥》，就是攤開你的一生......</p>
<p><a href='http://www.rongshuxia.com/book/5509439'  title='博主myvin的其他信息' target='_blank'>
點擊查看博主myvin的遺作</a>(博主又名：曉馬哥vin)</p>
<p><a href='http://www.rongshuxia.com/book/5509439' title='博主myvin的其他信息' target='_blank'>
http://www.rongshuxia.com/book/5509439<;/a></p>          
</p>          
<p class="modal-footer">           
 <button type="button" class="btn btn-default" data-dismiss="modal">關閉</button>         
  </p>        
  </p>      
  </p>    
  </p>

正如我們最開始說的，這是一個靜態模態框，所以并沒有實現點擊彈出模態框的效果，所以我們接下來要做的就是添加一個點擊'博主myvin的其他信息'就會彈出我們上面寫出的模態框的效果。當然要實現也很簡單。我們先看看我們很早之前寫的導航欄的一段代碼：

<li data-toggle="modal" data-target="#about"><a href="#" >博主myvin的其他信息</a></li>

我們寫了一個有a的li，我們現在要做的就是點擊這個li就能跳轉到那個信息modal。因為我們寫的那個modal設置了一個id=about，所以我們只要使li的target是這個modal就ok了，這里我們用data：

data-target="#about"

現在點擊這個li就能正常淡入淡出的彈出一個modal了。

注冊和登陸按鈕

注冊和登陸按鈕其實也分別是一個modal，要實現的效果如下

點擊登陸或注冊按鈕，彈出modal，在modal頂部其實兩個tab，分別點擊注冊或登陸按鈕會分別切換到相應的tab，所以是一個tab和modal的組合。之前我們聊過tab，再結合上面說的modal，這個效果并不難做。

在這里我們省去了modal-header，只在modal-body中加入了兩個tab，而tab是一個ul和一個tab-content組成，

所以code如下：

<p id="signin-signup-tab" class="modal fade">      
<p class="modal-dialog">        
<p class="modal-content">          
<p class="modal-body">            
<button type="button" class="close" data-dismiss="modal" aria-label="Close">x</button>            
<ul class="nav nav-tabs" role="tablist">              
<li id="signin-li"><a href="#signin-tab" role="tab" data-toggle="tab">登陸</a></li>              
<li id="signup-li"><a href="#signup-tab" role="tab" data-toggle="tab">注冊</a></li>            
</ul>            
<p class="tab-content" id="signin-signup-tab">              
<p class="tab-pane" id="signup-tab">                
<form action="" class="form col-md-12 center-block">                  
<p class="form-group">                    
<input type="text" class="form-control input-lg" placeholder="請輸入登陸郵件" title="郵箱正確格式：xxx@xxx.com">
</p>                  
<p class="form-group">                    
<input id="password1" type="password" class="form-control input-lg" placeholder="請輸入登陸密碼">                  
</p>                  
<p class="form-group">                    
<input id="password2" type="password" class="form-control input-lg" placeholder="請再次輸入密碼">   
</p>                  
<p class="form-group">                    
<input type="password" class="form-control input-lg" placeholder="請輸入用戶昵稱">                  
</p>                  
<p class="form-group">                    
<input type="password" class="form-control input-lg" placeholder="請輸入驗證碼">                  
</p>                  
<p class="form-group">                    
<button class="btn btn-primary btn-lg btn-block">注冊</button>                  
</p>                
</form>              
</p>              
<p class="tab-pane" id="signin-tab">                
<form action="" class="form col-md-12 center-block">                  <
p class="form-group">                    
<input type="text" class="form-control input-lg" placeholder="請輸入登陸郵件">                  
</p>                  
<p class="form-group">                    
<input type="password" class="form-control input-lg" placeholder="請輸入登錄密碼">                  
</p>                  
<p class="form-group">                   
 <button class="btn btn-primary btn-lg btn-block">立刻登錄</button>                    
 <span><a href="newforgot.html">忘記密碼</a></span>                  
 </p>                
 </form>              
 </p>            
 </p>          
 </p>          
 <p class="modal-footer">          
 </p>        
 </p>      
 </p>    
 </p>

同樣我們需要在導航欄中的登陸/注冊按鈕處添加target：

 <li data-toggle="modal" data-target="#signin-signup-tab" id="signin-button"><a href="#" >登陸</a></li>   
 <li data-toggle="modal" data-target="#signin-signup-tab" id="signup-button"><a href="#" >注冊</a></li>

但是這樣寫的話會有一個小問題：

在聊tab的時候，我們說過得給其中一個tab設置active類，因為初始化是有一個tab顯示的，那么在這個登陸/注冊modal中，如果我們給其中一個tab添加active類，比如我們給登陸的li和相應的tab-content添加active類，那么效果自然是這樣的：

我們先點擊登陸按鈕，彈出的modal中的登陸tab顯示；如果我們先點擊注冊按鈕，那么還是登陸tab顯示??因為我們只給注冊添加了active，在tab中，有active的會首先顯示。無論我們先點擊哪個效果總是這樣的：

如果我們給注冊和登陸都添加上active類呢？效果是這樣的：

因為都添加了active，所以兩個tab都顯示打開，因為登陸p在注冊p上面，所以總是顯示登陸tab。

那如果我們兩者都不添加active呢？那么效果是這個樣子的：

顯然，以上三種情況都不符合我們的實現效果。

這里說一個一個直接笨拙的方法，那就是點擊哪個按鈕就將active類添加到相應的按鈕上，同時移除另一個按鈕上的active類，js實現如下：

      $('#signin-button').click(function(){       
      $('#signup-li').removeClass('active');        
      $('#signup-tab').removeClass('active');        
      $('#signin-li').addClass('active');        
      $('#signin-tab').addClass('active');      
      });      
      $('#signup-button').click(function(){        
      $('#signin-li').removeClass('active');        
      $('#signin-tab').removeClass('active');        
      $('#signup-li').addClass('active');        
      $('#signup-tab').addClass('active');      
      });

這樣一個基本的網頁就算完成了。

以上就是關于“Bootstrap模態框怎么用”的內容，如果改文章對你有所幫助并覺得寫得不錯，勞請分享給你的好友一起學習新知識，若想了解更多相關知識內容，請多多關注億速云行業資訊頻道。