IT工程師數位筆記本

1、modal基本用法

.modal.modal-dialog.modal-content

.modal-content里面包括.modal-header.modal-body.modal-footer

1）創建一個button，點擊之后可以彈出一個modal

有兩種方法綁定事件

一種是：添加屬性.data-toggle="modal"和.data-target="#modalId"

第二種是：添加Js事件

2）創建modal

<div class="modal">    <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">modal header</div>            <div class="modal-body">modal body</div>            <div class="modal-footer">modal footer</div>        </div>    </div></div>

3）可以給.modal-header和.modao-footer添加關閉modal的按鈕

<button type="button" class="close" data-dismiss="modal">    <span>&times;</span></button><button type="button" class="btn btn-default" data-dismiss="modal">    Close</button>

4）點擊按鈕打開一個modal

<button type="button" class="btn btn-default" data-toggle="modal" data-target="#modal">popup</button><div class="modal" role="dialog" aria-labelledby="mymodal" id="modal">     <div class="modal-dialog">        <div class="modal-content">            <div class="modal-header">                modal header                <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>            </div>            <div class="modal-body">modal body</div>            <div class="modal-footer">                modal footer                <button type="button" class="btn btn-primary" data-dismiss="modal">close</button>                <button type="button" class="btn btn-default">save</button>            </div>        </div>    </div></div>

2、增強模態框的可訪問性

務必為 .modal 添加 role=”dialog” 屬性，aria-labelledby=”myModalLabel” 屬性用于只想模態框的標題欄，aria-hidden=”true” 用于通知輔助性工具略過模態框的 DOM元素。

另外，你還應該通過 aria-describedby 屬性為模態框 .modal 添加描述性信息。

3、可選尺寸

模態框提供了兩個可選尺寸，通過為 .modal-dialog 增加一個樣式調整類實現。

.modal\.bs-example-modal-lg.modal-dialog\.modal-lg.modal\.bs-example-modal-sm.modal-dialog\.modal-sm

<!-- Large modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button><div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">  <div class="modal-dialog modal-lg">    <div class="modal-content">      ...    </div>  </div></div><!-- Small modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button><div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">  <div class="modal-dialog modal-sm">    <div class="modal-content">      ...    </div>  </div></div>

4、動畫效果

可以給.modal添加.fade，實現modal的淡入淡出的效果

<div class="modal" tabindex="-1" role="dialog" aria-labelledby="" aria-hidden="true">  ...</div>

5、js調用modal

1）手動打開模態框:

$("#button").on("click", function () {     $("#modal").modal('show'); });

2）手動打開或關閉模態框:

$("#button").on("click", function () {     $("#modal").modal('toggle'); });

3）手動隱藏模態框:

$("#button").on("click", function () {     $("#modal").modal('hide'); });

6、modal事件

Bootstrap 的模態框類提供了一些事件用于監聽并執行你自己的代碼。

show.bs.modalshow 方法調用之后立即觸發該事件。如果是通過點擊某個作為觸發器的元素，則此元素可以通過事件的 relatedTarget 屬性進行訪問。shown.bs.modal此事件在模態框已經顯示出來（并且同時在 CSS 過渡效果完成）之后被觸發。如果是通過點擊某個作為觸發器的元素，則此元素可以通過事件的 relatedTarget 屬性進行訪問。hide.bs.modalhide 方法調用之后立即觸發該事件。hidden.bs.modal此事件在模態框被隱藏（并且同時在 CSS 過渡效果完成）之后被觸發。loaded.bs.modal從遠端的數據源加載完數據之后觸發該事件。

例子：

$('#myModal').on('hidden.bs.modal', function (e) {  // do something...})

看文倉www.kanwencang.com網友整理上傳,為您提供最全的知識大全,期待您的分享，轉載請注明出處。
歡迎轉載：http://www.kanwencang.com/bangong/20170206/98359.html

文章列表

---

Avast 防毒軟體已檢查此封電子郵件的病毒。 www.avast.com