Saber 酱的抱枕

最近做了两个手机站，美工的设计稿都是640px宽，但是商务通弹窗图片是260px宽，放在页面中显得很小。无奈进行放大。（我很好奇在商务通后台能不能把弹窗尺寸设置得比图片实际宽高大。那样就很省事了。）

商务通弹窗处的主要结构如下：

其中LR_swtbox是控制弹窗图片大小，图片是它的背景图。LR_swtchat和LR_swtchat a是打开咨询窗口的链接，LR_swtColse和LR_swtColse a是关闭弹窗的按钮。

css样式如下：

#LR_swtbox{width:520px !important;height: 310px !important;margin-left: -130px;margin-top: -77px;background-size: 100% !important;}
#LR_swtchat,#LR_swtchat a{width:520px !important;height: 310px !important;}
#LR_swtColse,#LR_swtColse a{width: 70px !important;height: 60px !important;}

一开始我是脑抽的用js写的，中间有些地方被坑了，例如有些元素无法覆盖它的样式，只好转而对♂付相邻的元素。效果出来之后才想到用css写多省事。用js设置css的时候写得真蛋疼，定时器也耗资源，还要引入jq。但是js有一个好，就是自由度高，如果以后拿到别的地方用，改一个参数就行了，css就都得改。

js代码如下：

<script>
    function img2b () {
        var trueW=260;
        if (!!document.getElementById("LR_swtbox")) {
        	if ($("#LR_swtbox").width()==trueW) {//如果是没有放大的情况下
        		var oldW=$("#LR_swtbox").width();
	            var oldH=$("#LR_swtbox").height();
	            $("#LR_swtbox").css({"width":oldW*2+"px","height":oldH*2+"px","marginLeft":"-"+oldW/2+"px","marginTop":"-"+oldH/2+"px","backgroundSize":"100%"});
	            $("#LR_swtchat").css({"width":oldW*2+"px","height":oldH*2+"px"});
	            $("#LR_swtchat a").css({"width":oldW*2+"px","height":oldH*2+"px"});
        		var oldCloseW=$("#LR_swtColse").width();
        		var oldCloseH=$("#LR_swtColse").height();
	            $("#LR_swtColse").css({"width":oldCloseW*2+"px","height":oldCloseH*2+"px"});
	            $("#LR_swtColse a").css({"width":oldCloseW*2+"px","height":oldCloseH*2+"px"});
        	};
        };
    }
    var img2bT=window.setInterval("img2b()", 100);
</script>

里面有两个要注意的地方，第一，判断元素是否存在的时候，不能使用jq的选择器，因为jq永远有返回值（即使返回值是空集合），条件会判断为true。如果为了方便可以用jq选择之后用length>0来判断。第二，不要关闭定时器，因为弹窗关闭之后，再次出现时还是原来的大小，需要再次放大。所以我设置了一个原本的宽度来作为判断条件。

话说我这代码高亮插件真是有病，好好地代码怎么成注释了。

修改商务通弹窗元素的尺寸