modal用法

<a class="btn btn-primary" data-toggle="modal" data-target="#MyModal" aria-hidden="true" >open</a>
    <!-- Modal -->
    <div class="modal hide fade" id="MyModal" tabindex="-1" data-backdrop="false" data-remote="test.html">
        <div class="modal-header">
            <button class="close" data-dismiss="modal">&times;</button>
            <p><h3>modal header</h3></p>
        </div>
        <div class="modal-body">
            <p>modal body</p>
        </div>
        <div class="modal-footer">
            <button class="btn" data-dismiss="modal" aria-hidden="true">close</button>
            <button class="btn btn-primary" aria-hidden="true">save</button>
        </div>
    </div>
 

對於上述程式碼，我需要提幾點tips:

1. 第一個div的class裡的 hide fade。hide讓模態框初始為隱藏狀態，如果想初始就顯示，把hide去掉即可。fade動畫效果-淡入淡出，看起來更舒服。

2. data-backdrop 它的屬性值常用的有三個: . true - - - 預設值，顯示模態背景，點選空白處，自動關閉模態框。 . static - - - 顯示模態背景，（點選空白處，沒效果，區別於上面的true）。 . false - - -不顯示模態背景。

3. tab-index — 按esc,自動關閉模態框，它的值任意都可實現該效果，（值的大小有區別，我現在沒深入研究過）

4. data-remote—在modal-body中顯示頁面（第二種方式：在開啟模態框的按鈕或者超連結中 href 屬性後面加入頁面地址）

5. modal結構就是：modal-header , modal-body, modal-footer

6. modal-header 中 button的樣式為close，因為我們想點選它關閉，data-dismiss 值為 modal，（它是關閉模態框的具體實現）× 差號 後面的p標籤只是讓它整體看起來更好看，可以不加它看看效果。

7. aria-hidden 螢幕閱讀器能夠讀取標籤的值，比如close，save, open。。。設定為false，則不能讀取（該服務為非正常人士設計，比如視力障礙，比較人性化。。。）

bootstrap2.3從該程式碼中，體現了一點缺陷。

1. 模態框的不可挪動（該改動在3.0版本中實現了）
2. 缺少相關事件，也就是說事件還不完善。（同樣在3.0版本中有了變動）