一、彈窗的運(yùn)用
彈窗效果在網(wǎng)頁(yè)和app中的運(yùn)用還是比較常見(jiàn)的。每當(dāng)在手機(jī)里下載一個(gè)app時(shí)，請(qǐng)求獲取存儲(chǔ)空間和地理位置時(shí)，絕大部分都是使用的彈窗。它不僅提醒作用強(qiáng)、節(jié)約頁(yè)面空間，還比較美觀。模態(tài)框（Modal）是覆蓋在父窗體上的子窗體，目的是顯示來(lái)自一個(gè)單獨(dú)的內(nèi)容，可以在不離開(kāi)父窗體的情況下有一些互動(dòng)（子窗體可提供信息、交互等）。使用模態(tài)窗口的時(shí)候，一般會(huì)用到某種觸發(fā)器，常用的是按鈕或鏈接。
二、模態(tài)框（Modal）簡(jiǎn)單介紹
模態(tài)框在bootstrap中是一個(gè)插件，所以也可以單獨(dú)引用插件，但是這就需要引用modal.js。但是在本文中還是介紹用bootstrap的寫(xiě)法。模態(tài)框作為覆蓋在父體窗口上的子窗口，它的窗口設(shè)置和常見(jiàn)方法如下圖：
圖2.1 窗口設(shè)置
圖2.2 常見(jiàn)方法
三、制作步驟
如下3.1所示效果圖，是一個(gè)較為完整的頁(yè)面，這里只展示模態(tài)框的相關(guān)代碼。
（1）制作觸發(fā)器并設(shè)計(jì)樣式。制作如下圖3.1所示的模態(tài)框，用的是按鈕觸發(fā)器。這里的class="btn btn-primary"，btn它可以表示按鈕的基類(lèi)，btn-primary就是button所生的樣式融合（還有input-primary和a-primary所生的樣式），每種都有六種樣式，分別是" btn-primary" 、"btn-warning"、 " btn-success" 、" btn-info"、 "btn-danger"、" btn-default"。代碼如下：
<button class="btn btn-primary" type="button">了解更多</button>
（2）設(shè)置模態(tài)框。class="modalfade"當(dāng)模態(tài)框被切換時(shí)，它會(huì)引起內(nèi)容淡入淡出。class="modal-body"，用于為模態(tài)窗口的主體設(shè)置樣式。class="modal-footer"，用于為模態(tài)窗口的底部設(shè)置樣式。class="modal-content"是用來(lái)設(shè)置模態(tài)框是顯示還是隱藏。data-dismiss="modal"，用于關(guān)閉模態(tài)窗口。class="modal-dialog"是用來(lái)設(shè)置彈出框居中的。默認(rèn)情況下彈出框的寬度比較小，不適合要求，bootstrap中提供了modal-dialog的三個(gè)選項(xiàng)，大、默認(rèn)、?。╩odal-lg最大，默認(rèn)中，modal-sm最?。４a如下：
<section style="position: relative;left: 530px;">
<button class="btn btn-primary" type="button">了解更多</button>
<div class="modal fade" id="mymodal">
<div>
<div>
<div>
<p>
旅游服務(wù)是指旅游業(yè)服務(wù)人員通過(guò)各種設(shè)施、設(shè)備、方法、手段、途徑和“熱情好客”的種種表現(xiàn)形式，
</p>
</div>
<div>
<button type="button" class="btn btn-default" data-dismiss="modal">關(guān)閉</button>
<button type="button" class="btn btn-primary">保存</button>
</div>
</div>
</div>
</div>
</section>
圖3.1 效果圖
（3）設(shè)置js。toggle指的是，點(diǎn)擊的時(shí)候觸發(fā)和當(dāng)前模態(tài)窗口狀態(tài)相反的操作。比如現(xiàn)在模態(tài)窗口是關(guān)閉的，那么點(diǎn)擊按鈕，就打開(kāi)窗口。如果當(dāng)前窗口是打開(kāi)的，那么點(diǎn)擊按鈕就會(huì)關(guān)閉。此外，show，指的是點(diǎn)擊的時(shí)候觸發(fā)打開(kāi)窗口。hide，指的是點(diǎn)擊的時(shí)候觸發(fā)關(guān)閉模態(tài)窗。當(dāng)我們把“$("#mymodal").modal("toggle")”代碼改成“$("#mymodal").modal("hide")”然后去點(diǎn)擊按鈕，會(huì)發(fā)現(xiàn)怎么點(diǎn)都打不開(kāi)，這就是因?yàn)樵O(shè)定了點(diǎn)擊觸發(fā)關(guān)閉模態(tài)窗。
$(".btn").click(function(){
$("#mymodal").modal("toggle");
});
});
END編 輯 | 王楠嵐
責(zé) 編 | 劉 連
where2go 團(tuán)隊(duì)
微信號(hào)：算法與編程之美
