關於彈出層的總結

關於彈出層的我的做法：

       例如：點擊“修改”按鈕，彈出彈出框，並將需要修改的信息附到彈出框中；

       思路：

      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