模態框以及大小和位置

1. 描述模態框

bootstrap modals（模態框）是使用定製的 jquery 外掛程式建立的。它可以用來建立模態視窗豐富使用者體驗，或者為使用者新增實用功能。您可以在 modals（模態框）中使用 popover（彈出框）和 tooltip（工具提示外掛程式）。

在本教程中，將通過一些例項和解釋來討論如何使用 bootstrap 建立模態視窗。同時，我們也會討論用於定製的各種可用選項。

2.需要的檔案

3.**演示

×模態框中的文字

你可以在這新增一些文字。

喚醒活動

關閉發動演示模態框

4.調整模態框的大小和位置

bootstrap其實就是設定了一堆已經準備好的css，你直接拿過來用就可以了，

其中模態框有幾點比較重要

1) overflow

overflow 一共有5個屬性，在任意css中可以修改。

overflow:auto ：內容會被修剪，超出設定的寬高後會出現滾動條。

overflow:scroll：內容會被修剪，不管內容是否超出，都會出現滾動條的位置。

overflow:visible：這個是預設值，內容不會被修剪，會出現在元素框外面。

overflow:hidden：內容被修剪，多餘的內容被隱藏。

overflow:inherit：從父元素那裡繼承overflow的值。

一般我們使用第乙個overflow：auto 屬性的就可以將過多的內容，以滾動條

形式顯示出來，上面的5個屬性，還可以分為：overflow-x：和overflow-y，分別是x軸方向和y軸方向

2)max-height和max-width

模態框的大小我們通過height和width來調整，設定max-height和max-width

這兩個屬性可以將模態框的最大高度和寬度固定，這只是固定height和width的上限，如果height和width沒有超過max-height和max-height，那height和width則不會收到影響。需要注意的是，雖然這個兩個屬性比較雞肋，但是如果在bootstrap.css會有寫到，比如

如果發現自己調整不了模態框的大小，那麼就要想一想是不是使用了這個屬性。

3)調整模態框位置

直接調整

可以通過top，right，bottom，left屬性用百分比來直接調整

也可以通過js讓模態框水平居中顯示

$modal.on('shown.bs.modal',function(event)

var$modaldialog = $modal.find('.modal-dialog'),

h =$modaldialog.height(),

w =$modaldialog.width();

$modaldialog.css();

});// 相容ie9及以下版本

function getieversion()