jquery 弹框效果。

HTML代码必须包含：

 <div id="M_div" style="width: 1px;height:1px;background-image: url('image/shopedit/M_bg.png');z-index:1010;display:none">
<!-------------------------------在这里写内容------------------------------------------------------>

<!---------<div id="closeM_div"><!----关闭按钮-----> </div>-------->

</div>

CSS必须包含一下代码：

.mask 
{
    z-index:999;
    background-color:#000000;
    position:absolute;
    top:0px;
    left:0px;
    opacity:0.3;
    filter: Alpha(Opacity=60);
}

Jquery代码：

//需注意的是divZ-index必须大于mask的z-index，mask的z-index必须大于其他需要被mask遮住的控件的z-index

function showDialog(divid, divWidth, divHeight,divZindex,maskid,maskZindex) {

    var div_obj = $("#"+divid);
    var windowWidth = document.body.clientWidth;
    var maskheight = document.body.scrollHeight;
    if (window.screen.height > maskheight)
        maskheight = window.screen.height;
    var Center = windowWidth / 2 - divWidth/2;
    //添加并显示遮罩层   
    $("<div id='"+maskid+"'></div>").addClass("mask")
                                  .width(document.body.scrollWidth)
                                  .height(maskheight)
                                  .click(function () {


                                      $("#" + divid).animate({ width: "1px", height: "1px", opacity: "hide" }, "slow");
                                      $("#"+maskid).remove();
                                  })
                                  .appendTo("body")
                                  .fadeIn(200);
                                  document.getElementById(maskid).style.zIndex = maskZindex;
                                  div_obj.css({ "position": "absolute", "left": Center, "top": "140px", "z-index": divZindex })
               .animate({ width: divWidth+"px", divHeight: Height+"px", opacity: "show" }, "500")
               .fadeIn(200);

}

调用：

showDialog("M_div","500","500","1010","mask_M_div","1000");