bootstrap提供了一個寫好的css文件和js文件然而在使用時遇到了一下并不是很好的問題，今天在使用彈出對話框時遇到了一個這樣的問題

上述代碼

<a class="btn" data-toggle="modal" href="#myModal" data-keyboard="false" data-backdrop="true" >點擊"無ESC關(guān)閉，無遮蔽背景"演示</a>
<div class="modal" id="myModal">
 <div class="modal-header">
 <a class="close" data-dismiss="modal">×</a>
 <h3>對話框標(biāo)題</h3>
 </div>
 <div class="modal-body">
 <p>對話框內(nèi)容</p>
 </div>
 <div class="modal-footer">
 <a href="#" class="btn">關(guān)閉</a>
 <a href="#" class="btn btn-primary">保存更新</a>
 </div>
</div>

問題是當(dāng)單機對話框的邊緣時就是陰暗的背影時對話框自動消失，查看了bootstrap的官網(wǎng)也沒找到最后在中文翻譯的網(wǎng)站http://wrongwaycn.github.com/bootstrap/docs/javascript.html找到原因了是因為data-backdrop設(shè)置為true當(dāng)設(shè)置為false時背景就消失了

背景消失但是下面的所有按鈕都是可單機的與原來的彈出對話框截然不同

找了一下午找了一個解決方案就是在就是在對話框下面body上面鋪一層div背景色設(shè)置為black 透明度設(shè)置為0.5

div設(shè)置的屬性是Z-index為正數(shù)

 position:absolute;
 left:0px;
 top:0px;
 z-index:100；

z-index 屬性設(shè)置元素的堆疊順序。擁有更高堆疊順序的元素總是會處于堆疊順序較低的元素的前面。

注釋：元素可擁有負的 z-index 屬性值。

注釋：Z-index 僅能在定位元素上奏效（例如 position:absolute;）！

說明

該屬性設(shè)置一個定位元素沿 z 軸的位置，z 軸定義為垂直延伸到顯示區(qū)的軸。如果為正數(shù)，則離用戶更近，為負數(shù)則表示離用戶更遠。

寫一段腳本語言

$(document).ready(function(){
var width=document.body.clientWidth;//網(wǎng)頁可見區(qū)域?qū)?
var height=document.body.clentHeight;//網(wǎng)頁可見區(qū)域高
$("<div style='width:"+width+" height:"+height+" position:absolate ;left:0px;top:0px;z-index:100'></div>").appendTo("bofy");
});

這樣就實現(xiàn)覆蓋了，具體單機時覆蓋單機時覆蓋解除，很簡單就能做到

下面來寫一下獲取屏幕，瀏覽器，網(wǎng)頁的寬高

HTML精確定位:scrollLeft,scrollWidth,clientWidth,offsetWidth
scrollHeight: 獲取對象的滾動高度。
scrollLeft:設(shè)置或獲取位于對象左邊界和窗口中目前可見內(nèi)容的最左端之間的距離
scrollTop:設(shè)置或獲取位于對象最頂端和窗口中可見內(nèi)容的最頂端之間的距離
scrollWidth:獲取對象的滾動寬度
offsetHeight:獲取對象相對于版面或由父坐標(biāo) offsetParent 屬性指定的父坐標(biāo)的高度
offsetLeft:獲取對象相對于版面或由 offsetParent 屬性指定的父坐標(biāo)的計算左側(cè)位置
offsetTop:獲取對象相對于版面或由 offsetTop 屬性指定的父坐標(biāo)的計算頂端位置
event.clientX 相對文檔的水平座標(biāo)
event.clientY 相對文檔的垂直座標(biāo)
event.offsetX 相對容器的水平坐標(biāo)
event.offsetY 相對容器的垂直坐標(biāo)
document.documentElement.scrollTop 垂直方向滾動的值
event.clientX+document.documentElement.scrollTop 相對文檔的水平座標(biāo)+垂直方向滾動的量

IE，F(xiàn)ireFox 差異如下：

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均無關(guān))

網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth
網(wǎng)頁可見區(qū)域高： document.body.clientHeight
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬)
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的高)
網(wǎng)頁正文全文寬： document.body.scrollWidth
網(wǎng)頁正文全文高： document.body.scrollHeight
網(wǎng)頁被卷去的高： document.body.scrollTop
網(wǎng)頁被卷去的左： document.body.scrollLeft
網(wǎng)頁正文部分上： window.screenTop
網(wǎng)頁正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的寬： window.screen.width
屏幕可用工作區(qū)高度： window.screen.availHeight
屏幕可用工作區(qū)寬度： window.screen.availWidth

－－－－－－－－－－－－－－－－－－－

技術(shù)要點

本節(jié)代碼主要使用了Document對象關(guān)于窗口的一些屬性，這些屬性的主要功能和用法如下。

要得到窗口的尺寸，對于不同的瀏覽器，需要使用不同的屬性和方法：若要檢測窗口的真實尺寸，在Netscape下需要使用Window的屬性；在IE下需要深入Document內(nèi)部對body進行檢測；在DOM環(huán)境下，若要得到窗口的尺寸，需要注意根元素的尺寸，而不是元素。

Window對象的innerWidth屬性包含當(dāng)前窗口的內(nèi)部寬度。Window對象的innerHeight屬性包含當(dāng)前窗口的內(nèi)部高度。

Document對象的body屬性對應(yīng)HTML文檔的標(biāo)簽。Document對象的documentElement屬性則表示HTML文檔的根節(jié)點。

document.body.clientHeight表示HTML文檔所在窗口的當(dāng)前高度。document.body. clientWidth表示HTML文檔所在窗口的當(dāng)前寬度。

PS：bootstrap modal draggable問題小結(jié)

最近項目中用到了bootstrap modal框，想為其實現(xiàn)draggable效果，在為其添加js代碼$('.modal-dialog').draggable()后結(jié)果還是沒有draggable效果，后面發(fā)現(xiàn)是在 另一處代碼塊存在doc[0].ondragstart = doc[0].onselectstart = function () { return false; }（此處禁用了draggable事件），當(dāng)刪除該處代碼后結(jié)果就能實現(xiàn)draggable效果。

以上所述是小編給大家介紹的使用 bootstrap modal遇到的問題小結(jié),實現(xiàn)一個模擬后臺數(shù)據(jù)登入的效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論