关于弹出层的总结

关于弹出层的我的做法：

       例如：点击“修改”按钮，弹出弹出框，并将需要修改的信息附到弹出框中；

       思路：

      1. 点击修改按钮，弹出阴影遮罩，阴影遮罩的样式代码如下：

    .mask{
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
	position: fixed;
	z-index: 100;
	display: none;
     }

      2.在阴影遮罩上弹出弹出框，让弹出框出现在浏览器窗口的中间位置，弹出框的css样式代码如下：

    .upd_layer{
	position:fixed;
	width:800px;
        height:350px;
	background-color:#fff;
	left:50%;
	top:50%;
	margin-left:-400px;
	display:none;
	margin-top:-250px;
	z-index:111;
	overflow:auto;
	padding-top:10px;
      }

     3.弹出后发现阴影遮罩下的页面还可以鼠标进行滚动，在js代码中增加弹出时给body 设置“overflow:hidden”样式，解决此问题，js代码如下：

    $(".mask").show();
    $(".upd_layer").show();
    $("body").css("overflow","hidden");

           

     最后，发现在浏览器高度缩小时，弹出层的上部分可能被挡，可能影响小屏幕下的弹出效果，写了一段调整位置的函数解决此问题，js代码如下：

     

    //随时调整弹出层的位置
    function adjustTanchuPos() {
        $('.upd_layer').height($(window).height() * 0.5);
	$('.upd_layer').css('margin-top', $('.upd_layer').height() * -0.5);
    }
    adjustTanchuPos();
    $(window).resize(adjustTanchuPos);

     这样，该弹出层在窗口大小变动时，利用了jQuery中的resize()方法会随时调整弹出层的位置。

    完整的demo详见我的github： https://github.com/pluscai/tanchu_demo/blob/master/tanchu