久久精品中文字幕av,av.涩涩涩涩涩涩涩涩,亚洲国产日韩欧美精品成人久久久,成人福利电影免费在线观看,日产国产原创av,日韩av午夜激情,bt天堂中文字幕,超级碰人妻在线视频,欧美老熟妇久久一区二区

## 模態(tài)框 modal.js * 模態(tài)框不支持嵌套，需要嵌套模態(tài)框的話，只能自己手動(dòng)實(shí)現(xiàn)。 * 模態(tài)框包含的html最好盡量作為body的直接子元素，以避免其他組件影響模態(tài)框的展現(xiàn)和功能。 * 彈出層出來(lái)以后，頁(yè)面的滾動(dòng)條會(huì)被覆蓋。 模態(tài)框主體結(jié)構(gòu)包含了模態(tài)框的頭、體和一組放置于底部的按鈕 : * modal 彈出層父級(jí) * modal-dialog 彈出層 * modal-content 彈出層的內(nèi)容區(qū)域 * modal-header 彈出層的頭部區(qū)域 * modal-body 彈出層的主體區(qū)域 * modal-footer 彈出層的底部區(qū)域 * fade 讓彈出層有一個(gè)運(yùn)動(dòng)的效果，加給彈出層父級(jí) 基本結(jié)構(gòu)代碼如下： ```html <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> </div> <div class="modal-body"> code。。。 </div><!--modal-body--> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> <!--modal-footer--> </div><!-- modal-content --> </div><!--modal-dialog --> </div> ```  **動(dòng)態(tài)實(shí)例** 點(diǎn)擊下面的按鈕即可通過(guò) JavaScript 啟動(dòng)一個(gè)模態(tài)框。在模態(tài)框之前添加一個(gè)按鈕（button），還需要給button添加data-toggle="modal" 和 data-target="目標(biāo)模態(tài)框ID"（指定要切換的特定的模態(tài)框） 來(lái)啟動(dòng)模態(tài)框效果，模態(tài)框?qū)纳系较?、逐漸浮現(xiàn)到頁(yè)面前。代碼如下： ```html <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 開(kāi)始演示模態(tài)框 </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> </div> <div class="modal-body"> code。。。 </div><!--modal-body--> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> <!--modal-footer--> </div><!-- modal-content --> </div><!--modal-dialog --> </div> ``` 注意：增強(qiáng)模態(tài)框的可訪問(wèn)性。務(wù)必為`.modal`添加`role="dialog"`和`aria-labelledby="..."`屬性，用于指向模態(tài)框的標(biāo)題欄（modal-title）；為`.modal-dialog`添加`aria-hidden="true"`屬性。 ***** **模態(tài)框可選尺寸** 模態(tài)框提供了兩個(gè)可選尺寸，通過(guò)為`.modal-dialog`增加一個(gè)樣式調(diào)整類(lèi)實(shí)現(xiàn)。 大尺寸模態(tài)框（modal-lg）： ```html <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 開(kāi)始演示模態(tài)框 </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> </div> <div class="modal-body"> code。。。 </div><!--modal-body--> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> <!--modal-footer--> </div><!-- modal-content --> </div><!--modal-dialog --> </div> ```  小尺寸模態(tài)框（modal-sm）： ```html <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 開(kāi)始演示模態(tài)框 </button> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true"> × </button> </div> <div class="modal-body"> code。。。 </div><!--modal-body--> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> <!--modal-footer--> </div><!-- modal-content --> </div><!--modal-dialog --> </div> ```  實(shí)際效果需要自己實(shí)際操作并在瀏覽器上展示。 ***** **禁止動(dòng)畫(huà)效果** 如果不需要模態(tài)框彈出時(shí)的動(dòng)畫(huà)效果（淡入淡出效果），刪掉`.fade`類(lèi)就可以了。 ***** 要利用模態(tài)中的引導(dǎo)網(wǎng)格系統(tǒng)（柵格系統(tǒng)），只需在.modal主體（modal-body）中嵌套.rows，然后使用普通的網(wǎng)格系統(tǒng)類(lèi)；同樣的，在模態(tài)框中使用表單，只需在.modal主體（modal-body）中嵌套form表單。 **用法** 通過(guò) data 屬性或 JavaScript 調(diào)用模態(tài)框插件，可以根據(jù)需要?jiǎng)討B(tài)展示隱藏的內(nèi)容。模態(tài)框彈出時(shí)還會(huì)為`<body>`元素添加`.modal-open`類(lèi)，從而覆蓋頁(yè)面默認(rèn)的滾動(dòng)行為，并且還會(huì)自動(dòng)生成一個(gè)`.modal-backdrop`元素用于提供一個(gè)可點(diǎn)擊的區(qū)域，點(diǎn)擊此區(qū)域就即可關(guān)閉模態(tài)框。 * 通過(guò) data 屬性：在控制器元素（比如按鈕或者鏈接）上設(shè)置屬性 data-toggle=”modal”，同時(shí)設(shè)置 data-target=”#identifier” 或 href=”#identifier” 來(lái)指定要切換的特定的模態(tài)框（帶有 id=”identifier”）。例如： ```html <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 開(kāi)始演示模態(tài)框 </button> ``` * 通過(guò) JavaScript 調(diào)用：只需一行 JavaScript 代碼，即可通過(guò)元素的 id`myModal`調(diào)用模態(tài)框： ```js $('#identifier').modal(options) ``` **參數(shù)** * backdrop: true/false/'static' 背景遮罩的顯示與否 * keyboard: true/false 鍵盤(pán)上的esc鍵可否關(guān)閉模態(tài)框 * show：true/false 模態(tài)框是否初始好了就立即顯示 * remote: path 用jquery的load方法加載指定url的內(nèi)容到*.modal-content*中 **方法** ```js $('#myModal').modal(option); //顯示模態(tài)框 $('#myModal').modal('toggle'); //切換模態(tài)框的顯示和隱藏 $('#myModal').modal('show'); //顯示 $('#myModal').modal('hide'); //隱藏 ``` **事件** Bootstrap 的模態(tài)框類(lèi)提供了一些事件用于監(jiān)聽(tīng)并執(zhí)行你自己的代碼。 | 事件類(lèi)型 | 描述 | | --- | --- | | show.bs.modal | `show`方法調(diào)用之后立即觸發(fā)該事件。如果是通過(guò)點(diǎn)擊某個(gè)作為觸發(fā)器的元素，則此元素可以通過(guò)事件的`relatedTarget`屬性進(jìn)行訪問(wèn)。 | | shown.bs.modal | 此事件在模態(tài)框已經(jīng)顯示出來(lái)（并且同時(shí)在 CSS 過(guò)渡效果完成）之后被觸發(fā)。如果是通過(guò)點(diǎn)擊某個(gè)作為觸發(fā)器的元素，則此元素可以通過(guò)事件的`relatedTarget`屬性進(jìn)行訪問(wèn)。 | | hide.bs.modal | `hide`方法調(diào)用之后立即觸發(fā)該事件。 | | hidden.bs.modal | 此事件在模態(tài)框被隱藏（并且同時(shí)在 CSS 過(guò)渡效果完成）之后被觸發(fā)。 | | loaded.bs.modal | 從`遠(yuǎn)端的數(shù)據(jù)源`加載完數(shù)據(jù)之后觸發(fā)該事件。 |