Bootstrap模態(tài)框（modal）不知道誰(shuí)起的名字，反正就這么回事。經(jīng)常使用在網(wǎng)站的 登陸/注冊(cè) 按鈕，彈出模態(tài)框，來(lái)提醒用戶(hù)輸入的同時(shí)，網(wǎng)站有一個(gè)遮罩層來(lái)屏蔽其他的操作。

一、 使用方法：1、通過(guò)自定義 data 屬性來(lái)調(diào)用；

2、使用js來(lái)調(diào)用，一般不用此方法；

$('#comeback').modal(options) 通過(guò) JavaScript 來(lái)調(diào)用帶有 id='comeback' 的模態(tài)框。

二、模態(tài)框在HTML的位置：

可以在任何位置，它主要是使用id來(lái)調(diào)用的。

三、用data屬性來(lái)調(diào)用模態(tài)框，在控制器元素（比如按鈕或者鏈接）上設(shè)置屬性 data-toggle='modal'，同時(shí)設(shè)置 data-target='#mymodal' 或 href='#mymodal' 來(lái)指定要切換的特定的模態(tài)框（帶有 id='mymodal'）。

1. data-toggle=“modal” 告訴bootstrap 調(diào)用的是模態(tài)框；

2. data-target =“#mymodal” 告訴bootstrap 調(diào)用的是模態(tài)框的ID為mymodal！

   

3. 第一個(gè)div的class ：.modal 說(shuō)明這個(gè)div為模態(tài)框?qū)傩裕?/p>

4. 第二個(gè)class屬性為fade 。是應(yīng)用一些淡入淡出的效果；

5. aria-labelledby='myModalLabel'，該屬性引用模態(tài)框的標(biāo)題。

6. 屬性 aria-hidden='true' 用于保持模態(tài)窗口不可見(jiàn)，直到觸發(fā)器被觸發(fā)為止（比如點(diǎn)擊在相關(guān)的按鈕上）。

7. class='close'，close 是一個(gè) CSS class，用于為模態(tài)窗口的關(guān)閉按鈕設(shè)置樣式。

   完成后，大概就是下圖這個(gè)鬼樣子：

   

你可以自己往上面添加一些內(nèi)容，讓他看起來(lái)更漂亮。