弹出框 居中显示

   

以前做过弹出框 但都是那还总alter弹出的小窗口，现在很不好用，大部分都是弹出一个面板，并且是显示页面中间，随着滚动条的滚动，div面板始终会在页面中间显示。下面那我们来看看代码：

         首先，先把jsp页面的代码归置好：

   <a href="javascript:void(0)"  onclick="ShowDiv('MyDiv','fade')">点击显示面板</a>

    <div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content" >
  <div class="popbox">
    <span class="poptit">标题</span><span class="close-but" onclick="CloseDiv('MyDiv','fade')"><img src="style/images/close-but.png" /></span>
  </div>
  <div class="clear"></div>
  <div class="popcontent">
  <form action="addnews" method="post" name="onlinemodel" id="form1">
    <table class="table-noborder"> 
      <tr>
        <td class="ri"><span class="red"> * </span>联系人：</td>
        <td><input type="text" size="47" /></td>
      </tr>    
    </table>
    <div class="clearfix"></div>
    <div class="but-box">
     <span class="ml20"><a href="#" class="btn-gray"  name="closenew" onclick="closenew()"  >取消</a></span>
    </div>
    <div class="clear"></div>
    </form>
  </div>
</div>  

 

 

紧接着写事件代码：

 <script  language="javascript" type="text/javascript">
function ShowDiv(show_div,bg_div){
   document.getElementById(show_div).style.display='block';
   document.getElementById(bg_div).style.display='block' ;
   var bgdiv = document.getElementById(bg_div);
   bgdiv.style.width = document.body.scrollWidth;
   $("#"+bg_div).height($(document).height());
};
function CloseDiv(show_div,bg_div)
{
    document.getElementById(show_div).style.display='none';
    document.getElementById(bg_div).style.display='none';
};

</script>

 

最后用美化一下，这样是是根据我自己当时的需求写的，可能有的你估计用不到，既然看到这里，说明你对样式还是略懂的，自己看着增减吧：

.black_overlay{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: #999;z-index:1001;-moz-opacity: 0.7;opacity:.70;filter: alpha(opacity=70);}
.white_content {display: none;position: absolute;top: 18%;left: 24%;width:52%;height: 50%;background-color: white;z-index:1002;
margin-left:-20px!important;/* FF IE7 该值为本身宽的一半 */
margin-top:-60px!important;/* FF IE7 该值为本身高的一半 */
margin-top:0px;
position:fixed!important;/* FF IE7 */
position:absolute;/* IE6 */

}

 .popbox{ width:100%; height:40px; margin:0; padding:0;overflow:hidden; background:url(../images/dialog-title.jpg) left top no-repeat;border:0;}
.popcontent{background-color:#fff;}
.close-but{ float:right; margin:12px 5px 5px 10px;text-align:center; cursor:pointer;}
.poptit{float:left; padding:10px; color:#fff; font-size:14px; font-weight:bold;}
.but-box{text-align:center; padding:10px 15px;}