bootstrap提供了一個寫好的css文件和js文件然而在使用時遇到了一下並不是很好的問題，今天在使用彈出對話框時遇到了一個這樣的問題
上述代碼
<a class="btn" data-toggle="modal" href="#myModal" data-keyboard="false" data-backdrop="true" >點擊"無ESC關閉，無遮蔽背景"演示</a> <div class="modal" id="myModal"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>對話框標題</h3> </div> <div class="modal-body"> <p>對話框內容</p> </div> <div class="modal-footer"> <a href="#" class="btn">關閉</a> <a href="#" class="btn btn-primary">保存更新</a> </div> </div>
問題是當單機對話框的邊緣時就是陰暗的背影時對話框自動消失，查看了bootstrap的官網也沒找到最後在中文翻譯的網站http://wrongwaycn.github.com/bootstrap/docs/javascript.html找到原因了是因為data-backdrop設置為true當設置為false時背景就消失了
背景消失但是下面的所有按鈕都是可單機的與原來的彈出對話框截然不同
找了一下午找了一個解決方案就是在就是在對話框下面body上面鋪一層div背景色設置為black 透明度設置為0.5
div設置的屬性是Z-index為正數
position:absolute; left:0px; top:0px; z-index:100；
z-index 屬性設置元素的堆疊順序。擁有更高堆疊順序的元素總是會處於堆疊順序較低的元素的前面。
注釋：元素可擁有負的 z-index 屬性值。
注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！
說明
該屬性設置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區的軸。如果為正數，則離用戶更近，為負數則表示離用戶更遠。
寫一段腳本語言
$(document).ready(function(){
var width=document.body.clientWidth;//網頁可見區域寬
var height=document.body.clentHeight;//網頁可見區域高
$("<div style='width:"+width+" height:"+height+" position:absolate ;left:0px;top:0px;z-index:100'></div>").appendTo("bofy");
});
這樣就實現覆蓋了，具體單機時覆蓋單機時覆蓋解除，很簡單就能做到
下面來寫一下獲取屏幕，浏覽器，網頁的寬高
HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離
scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對於版面或由父坐標 offsetParent 屬性指定的父坐標的高度
offsetLeft:獲取對象相對於版面或由 offsetParent 屬性指定的父坐標的計算左側位置
offsetTop:獲取對象相對於版面或由 offsetTop 屬性指定的父坐標的計算頂端位置
event.clientX 相對文檔的水平座標
event.clientY 相對文檔的垂直座標
event.offsetX 相對容器的水平坐標
event.offsetY 相對容器的垂直坐標
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標+垂直方向滾動的量
IE，FireFox 差異如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
(需要提一下：CSS中的margin屬性，與clientWidth、offsetWidth、clientHeight、offsetHeight均無關)
網頁可見區域寬： document.body.clientWidth
網頁可見區域高： document.body.clientHeight
網頁可見區域寬： document.body.offsetWidth (包括邊線的寬)
網頁可見區域高： document.body.offsetHeight (包括邊線的高)
網頁正文全文寬： document.body.scrollWidth
網頁正文全文高： document.body.scrollHeight
網頁被卷去的高： document.body.scrollTop
網頁被卷去的左： document.body.scrollLeft
網頁正文部分上： window.screenTop
網頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區高度： window.screen.availHeight
屏幕可用工作區寬度： window.screen.availWidth
－－－－－－－－－－－－－－－－－－－
技術要點
本節代碼主要使用了Document對象關於窗口的一些屬性，這些屬性的主要功能和用法如下。
要得到窗口的尺寸，對於不同的浏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內部對body進行檢測；在DOM環境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。
Window對象的innerWidth屬性包含當前窗口的內部寬度。Window對象的innerHeight屬性包含當前窗口的內部高度。
Document對象的body屬性對應HTML文檔的標簽。Document對象的documentElement屬性則表示HTML文檔的根節點。
document.body.clientHeight表示HTML文檔所在窗口的當前高度。document.body. clientWidth表示HTML文檔所在窗口的當前寬度。
PS：bootstrap modal draggable問題小結
最近項目中用到了bootstrap modal框，想為其實現draggable效果，在為其添加js代碼$('.modal-dialog').draggable()後結果還是沒有draggable效果，後面發現是在 另一處代碼塊存在doc[0].ondragstart = doc[0].onselectstart = function () { return false; }（此處禁用了draggable事件），當刪除該處代碼後結果就能實現draggable效果。
以上所述是小編給大家介紹的使用 bootstrap modal遇到的問題小結,實現一個模擬後台數據登入的效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對網站的支持！