彈出框css技巧

技術要點：

一個覆蓋整個屏幕的淺灰色背景的div,一個包含內容的的div,

代碼以下：

<div id="financeTip" style="">
    <div class="financeTipBg" style=""></div>
    <div id="financeTipInfor" class="e-tankuang alert financeTankuang" style=" ">
       <button type="button" class="close tanweizhiClose" 
           data-dismiss="alert">
           &times;
          </button>
    <div class="e-tankuang-title" id="myModalLabel">彈出框標題</div>
    <div class="e-tankuang-content">彈出框信息</div>
      </div>
  </div>

$(document).ready(function(){
    var m1_top = ( $(window).height() - $("#financeTipInfor").height() )/2;
 var m1_left = ( $(window).width() - $("#financeTipInfor").width() )/2;
    $("#financeTipInfor").css({"margin": m1_top + "px" +" "+ m1_left + "px"});
 window.onresize=function(){
 
 var m1_top = ( $(window).height() - $("#financeTipInfor").height() )/2;
 var m1_left = ( $(window).width() - $("#financeTipInfor").width() )/2;
    // $("#financeTipInfor").css({"margin": m1_top + "px auto","left": m1_left + "px"});
 $("#financeTipInfor").css({"margin": m1_top + "px" +" "+ m1_left + "px"});
 }
  $(".close").click(function () {
      $("#financeTip").css({"display": "none"});
      });
});

#financeTip{width:100%;overflow:hidden;}

.financeTankuang{width:90%;}

@media (min-width: 768px){

.financeTankuang{width:600px;}

}

.financeTipBg{position:absolute;width:100%;height:100%;background:#000;z-index:8001;left:0;top:0;opacity:0.2}

#financeTipInfor{position:absolute;left:0;top:0;z-index:8011;}