Bootstrap模態(tài)框怎么用

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

Bootstrap是什么

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

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

<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">模態(tài)框頭部</h5>      
</p>      <p class="modal-body">       
 <p>模態(tài)框主體部分</p>      
 </p>      
 <p class="modal-footer">        
 <button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>        
 <button type="button" class="btn btn-primary">保存</button>      
 </p>    
 </p><!-- /.modal-content -->  
 </p><!-- /.modal-dialog --></p><!-- /.modal -->

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

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

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

要實(shí)現(xiàn)的模態(tài)框和上面的靜態(tài)模態(tài)框很相似，只是title、body和下面的一個button，因?yàn)槭且粋€關(guān)閉的button，所以保留一個dismiss的data，即data-dismiss="modal"，表示這是一個具有關(guān)閉的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>當(dāng)愛情來得過于洶涌，我們該如何抉擇？</p>
<p>當(dāng)情感在時間的浪潮里激情得澎湃，我們又該何去何從？</p>
<p>“不死鳥，不死鳥?！庇刑嗟臇|西徘徊在我們的周身，或激情或蕭條，我們又該怎么權(quán)衡？</p>
<p>《不死鳥》，也許這里有你曾經(jīng)經(jīng)歷過的點(diǎn)點(diǎn)滴滴，也許有你即將經(jīng)歷的枝枝葉葉。</p>
<p>然而在某些東西面前，愛情又是那么的脆弱......</p>
<p>攤開《不死鳥》，就是攤開你的一生......</p>
<p><a href='http://www.rongshuxia.com/book/5509439'  title='博主myvin的其他信息' target='_blank'>
點(diǎn)擊查看博主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">關(guān)閉</button>         
  </p>        
  </p>      
  </p>    
  </p>

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

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

我們寫了一個有a的li，我們現(xiàn)在要做的就是點(diǎn)擊這個li就能跳轉(zhuǎn)到那個信息modal。因?yàn)槲覀儗懙哪莻€modal設(shè)置了一個id=about，所以我們只要使li的target是這個modal就ok了，這里我們用data：

data-target="#about"

現(xiàn)在點(diǎn)擊這個li就能正常淡入淡出的彈出一個modal了。

注冊和登陸按鈕

注冊和登陸按鈕其實(shí)也分別是一個modal，要實(shí)現(xiàn)的效果如下

點(diǎn)擊登陸或注冊按鈕，彈出modal，在modal頂部其實(shí)兩個tab，分別點(diǎn)擊注冊或登陸按鈕會分別切換到相應(yīng)的tab，所以是一個tab和modal的組合。之前我們聊過tab，再結(jié)合上面說的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="請輸入驗(yàn)證碼">                  
</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>

同樣我們需要在導(dǎo)航欄中的登陸/注冊按鈕處添加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設(shè)置active類，因?yàn)槌跏蓟怯幸粋€tab顯示的，那么在這個登陸/注冊modal中，如果我們給其中一個tab添加active類，比如我們給登陸的li和相應(yīng)的tab-content添加active類，那么效果自然是這樣的：

我們先點(diǎn)擊登陸按鈕，彈出的modal中的登陸tab顯示；如果我們先點(diǎn)擊注冊按鈕，那么還是登陸tab顯示??因?yàn)槲覀冎唤o注冊添加了active，在tab中，有active的會首先顯示。無論我們先點(diǎn)擊哪個效果總是這樣的：

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

因?yàn)槎继砑恿薬ctive，所以兩個tab都顯示打開，因?yàn)榈顷憄在注冊p上面，所以總是顯示登陸tab。

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

顯然，以上三種情況都不符合我們的實(shí)現(xiàn)效果。

這里說一個一個直接笨拙的方法，那就是點(diǎn)擊哪個按鈕就將active類添加到相應(yīng)的按鈕上，同時移除另一個按鈕上的active類，js實(shí)現(xiàn)如下：

      $('#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');      
      });

這樣一個基本的網(wǎng)頁就算完成了。

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