JS如何控制弹框出现在当前屏幕并且禁用滚动条

前言

    一个做前台的，如果了解或者熟悉后台开发的相关知识，是很吃香的。一个后台开发的程序员，如果恰好会做前台页面，是不是也增色不少呢？其中的奥妙就靠自己去体会啦。

背景

    最近在做一个家装项目手机端，是挂在微信上使用的。从来没做过前台，也没做过手机端，这个项目着实尝了一把鲜。我发现做前台页面的和做后台开发的同样会存在程序员和测试之间的矛盾。前台的埋怨后台怎么做的，落了那么多标签；后台埋怨前台，这页面怎么写的，转完JSP就不行了。看来IT世界里，矛盾无处不在啊，怪不得会出现全占工程师呢，简直是为了拯救世界来的。

    废话不多说，家装项目中，有这么一个需求，一个页面有很多条记录，占了好几屏幕，需要滚动条滑动。要求是要做到每滑动到一个地方，点击按钮，当前屏幕就要加一个黑色蒙板，蒙板上有一个弹框，弹框在页面上时，后面的记录是不能滑动的。说起来很抽象，晒张图先。

                                                                                         

    像上图，这四条记录是按比例缩小的，如果还原差不多平均占两个屏幕那么长。现在假设前两个记录是第一屏幕，滚动条向下滚动之后，后两条占第二个屏幕。当我在第一个屏幕点击技工已到达按钮时，在第一个屏幕正中央弹出弹框，并且页面不可滚动。在第二个屏幕点击按钮效果相同。说起来很抽象，看一下代码。

/*
 * 点击技工已到达按钮
 */
function updateRealArriveTime(index,event){
	var bdiv=document.getElementById("containerback");  //弹框的黑色蒙板
	var adiv=document.getElementById("containerarrive");//弹框
	bdiv.style.display="block";
	document.getElementById("passId").val=index;
	adiv.style.display="block";
	var html=document.documentElement; 
	var top=document.body.scrollTop;//html.scrollTop;
	var windowHeight = html.clientHeight;
	bdiv.style.top=top + "px";
	adiv.style.top=(top + 240/1334 * windowHeight) + "px";
	var windowWidth = html.clientWidth;
	$("html,body").css({overflow:"hidden"}); //禁用滚动条
}

    代码中涉及到几个属性，document.body.scrollTop，这个属性代表的是网页卷去的高度；document.documentElement.clientHeight，这个属性表示的是可见区域的高度。

                                                                                    

    元素的top和left属性可以固定一个元素的坐标，如上图所示，因为蒙板是和屏幕一样大的，所以直接让蒙板所在的Div的top为scrollTop，让弹框的top等于scrollTop加上合适的高，使得它在屏幕正中间即可，然后再禁用滚动条。好了，大功告成了，这样就实现想要的效果了。

总结

    做前台需要细心，太需要细心了。从一穷二白从来没做过，到现在也算是调过页面的了。虽然主要是做后台开发，但是懂一些前台的东西也是挺好的，真的会给自己加分，开发效率上会提高很多，这样工作效率提高了，福利自然是有滴。