页面宽度自适应 jquery动态设置css样式

前端技术 2023/09/08 CSS
最近在做项目的时候，客户要求点击父页面的一个按钮以后，整个父页面向左移动，左侧则用来显示图片，这样用户可以照着左侧图片在页面上填一些信息。结果可能在最初是设计的时候就有问题，设计的样式是这样的，点击父页面（页面宽度设置为100%）上的一个按钮整个页面往右侧移动页面比例为原来的50%，左侧弹出一个dialog页面，占整个页面的50%，结果dialog和原页面不在一个层上，dialog直接弹出的，并不在div里边，且dialog好像不能设置百分比，只能设置具体的像素，所以在尺寸不同的电脑上，dialog和原页面之间的宽度不一样。结果问了一下UI工程师，工程师的解决办法是：

复制代码
代码如下:

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窗体的时候，将网页可见区域宽（width:document.body.clientWidth）-dialog本身的宽度（710）然后让原页面右漂浮，面的昂算是解决了，但原来要求的比例实现不了了，暂时只有这么解决了，不知道各位还有其他想法吗？

本文地址：https://www.stayed.cn/item/21082

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案