頁面寬度自適應(yīng) jquery動態(tài)設(shè)置css樣式

2024-07-11 08:28:00

字體：大中小

供稿：網(wǎng)友

最近在做項目的時候，客戶要求點擊父頁面的一個按鈕以后，整個父頁面向左移動，左側(cè)則用來顯示圖片，這樣用戶可以照著左側(cè)圖片在頁面上填一些信息。結(jié)果可能在最初是設(shè)計的時候就有問題，設(shè)計的樣式是這樣的，點擊父頁面（頁面寬度設(shè)置為100%）上的一個按鈕整個頁面往右側(cè)移動頁面比例為原來的50%，左側(cè)彈出一個dialog頁面，占整個頁面的50%，結(jié)果dialog和原頁面不在一個層上，dialog直接彈出的，并不在div里邊，且dialog好像不能設(shè)置百分比，只能設(shè)置具體的像素，所以在尺寸不同的電腦上，dialog和原頁面之間的寬度不一樣。結(jié)果問了一下UI工程師，工程師的解決辦法是：

復(fù)制代碼

代碼如下:
function viewPictures() {
var link = "${ctx}/upload/showBigImageReport/null?idNumber=${idNumber}&applyId=${applyId}&imgType=null&resType=CUSTOMSERVICE&sign=";
parent.$.ligerDialog.open({ url: link,name:'pagerForm', width:700,height:950,modal:false,top:0,left:0,isDrag:false,allowClose:false,isResize:true});
/* $("#bankStatement"). css({width:"620",float:"right"});
$("#pepoleBankReport"). css({width:"620",float:"right"});
$("#othersInfo"). css({width:"620",float:"right"}); */
$("#entirety"). css({width:document.body.clientWidth-710+"px",float:"right"});
}

即再打開dialog窗體的時候，將網(wǎng)頁可見區(qū)域?qū)挘╳idth:document.body.clientWidth）-dialog本身的寬度（710）然后讓原頁面右漂浮，面的昂算是解決了，但原來要求的比例實現(xiàn)不了了，暫時只有這么解決了，不知道各位還有其他想法嗎？

上一篇：一款超酷的js+css3實現(xiàn)的3D標(biāo)簽云特效兼容ie7/8/9

下一篇：float元素浮動后高度不一致導(dǎo)致錯位的解決辦方法