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

上述代碼

<a class="btn" data-toggle="modal" href="#myModal" data-keyboard="false" data-backdrop="true" >點(diǎn)擊"無ESC關(guān)閉，無遮蔽背景"演示</a>
<div class="modal" id="myModal">
 <div class="modal-header">
 <a class="close" data-dismiss="modal">×</a>
 <h3>對(duì)話框標(biāo)題</h3>
 </div>
 <div class="modal-body">
 <p>對(duì)話框內(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)單機(jī)對(duì)話框的邊緣時(shí)就是陰暗的背影時(shí)對(duì)話框自動(dòng)消失，查看了bootstrap的官網(wǎng)也沒找到最后在中文翻譯的網(wǎng)站http://wrongwaycn.github.com/bootstrap/docs/javascript.html找到原因了是因?yàn)閐ata-backdrop設(shè)置為true當(dāng)設(shè)置為false時(shí)背景就消失了

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

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

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

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

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

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

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

說明

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

寫一段腳本語言

$(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");
});

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

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

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

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ù)要點(diǎn)

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

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

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

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

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

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

最近項(xiàng)目中用到了bootstrap modal框，想為其實(shí)現(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é)果就能實(shí)現(xiàn)draggable效果。

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

最新評(píng)論