眾所周知，模態(tài)彈出窗在頁(yè)面加載完成時(shí)，是被隱藏在頁(yè)面中的，只有通過(guò)一定的動(dòng)作（事件）才能觸發(fā)模態(tài)彈出窗的顯示。在Bootstrap框架中實(shí)現(xiàn)方法有2種，接下來(lái)分別來(lái)介紹這2種觸發(fā)模態(tài)彈出窗的使用方法。
聲明式觸發(fā)方法：
方法一：模態(tài)彈出窗聲明，只需要自定義兩個(gè)必要的屬性：data-toggle和data-target（bootstrap中聲明式觸發(fā)方法一般依賴于這些自定義的data-xxx 屬性。比如data-toggle="" 或者 data-dismiss=""）。例如：
<!-- 觸發(fā)模態(tài)彈出窗的元素 --> <button type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-primary">點(diǎn)擊我會(huì)彈出模態(tài)彈出窗</button> <!-- 模態(tài)彈出窗 --> <div class="modal fade" id="mymodal"> <div class="modal-dialog"> <div class="modal-content"> <!-- 模態(tài)彈出窗內(nèi)容 --> </div> </div> </div>
注意以下事項(xiàng)：
1、data-toggle必須設(shè)置為modal(toggle中文翻譯過(guò)來(lái)就是觸發(fā)器)；
2、data-target可以設(shè)置為CSS的選擇符，也可以設(shè)置為模態(tài)彈出窗的ID值，一般情況設(shè)置為模態(tài)彈出窗的ID值，因?yàn)镮D值是唯一的值。
方法二：觸發(fā)模態(tài)彈出窗也可以是一個(gè)鏈接<a>元素，那么可以使用鏈接元素自帶的href屬性替代data-target屬性，如：
<!-- 觸發(fā)模態(tài)彈出窗的元素 --> <a data-toggle="modal" href="#mymodal" class=" btn btn-primary" >點(diǎn)擊我會(huì)彈出模態(tài)彈出窗</a> <!-- 模態(tài)彈出窗 --> <div class="modal fade" id="mymodal" > <div class="modal-dialog" > <div class="modal-content" > <!-- 模態(tài)彈出窗內(nèi)容 --> </div> </div> </div>
不過(guò)建議還是使用統(tǒng)一使用data-target的方式來(lái)觸發(fā)。
點(diǎn)擊按鈕就能觸發(fā)彈出窗：
我來(lái)試試：在右側(cè)代碼編輯器添加代碼，以實(shí)現(xiàn)2種觸發(fā)模態(tài)彈出窗的方法
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)
