js弹出遮罩层

html代码：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>无标题页</title>

    <script src="javsscript/jquery-1.7.1.js" type="text/javascript"></script>

    <script type="text/javascript">
        //        //判断窗体是否最大化
        //        if (window.screen) {//判断浏览器是否支持window.screen判断浏览器是否支持screen    
        //            var myw = screen.availWidth;   //定义一个myw，接受到当前全屏的宽    
        //            var myh = screen.availHeight;  //定义一个myw，接受到当前全屏的高    
        //            window.moveTo(0, 0);           //把window放在左上脚    
        //            window.resizeTo(myw, myh);     //把当前窗体的长宽跳转为myw和myh    
        //        }
        //弹出隐藏层
        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';
            $("#country").val($("#name").val());
        };
        //窗口大小改变时
        $(window).resize(function() {
            if (!$('#MyDiv').is(':hidden')) popup();
        });

        //重新设置遮罩层的高和宽
        function popup() {
            var maskHeight = $(document).height();
            var maskWidth = $(window).width();
            $('#fade').css({ height: maskHeight,  maskWidth }).show();
        }  
    </script>

    <style type="text/css">
        .black_overlay
        {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index: 1001;
            -moz-opacity: 0.5;
            opacity: 0.5;
            filter: alpha(opacity=50);
            -khtml-opacity: 0.5;
        }
        .white_content
        {
            display: none;
            position: fixed;
            top: 10%;
            left: 10%;
            width: 80%;
            height: 80%;
            border: 16px solid lightblue;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
         <!
        -- .white_content_small
        {
            display: none;
            position: fixed;
            top: 20%;
            left: 30%;
            width: 40%;
            height: 50%;
            border: 16px solid lightblue;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }
        -- ></style>
</head>
<body>
    国家：
    <input id="country" type="text" />
    <input id="Button1" type="button" value="选择国家" onclick="ShowDiv('MyDiv','fade')" />
    <!--弹出层时背景层DIV-->
    <div id="fade" class="black_overlay">
    </div>
    <div id="MyDiv" class="white_content">
        <div style="text-align: right; cursor: default; height: 40px;">
            <br />
            <span style="font-size: 16px; cursor: pointer; border: black 1px solid; margin-bottom: 1px;"
                onclick="CloseDiv('MyDiv','fade')">关闭</span>
        </div>
        <input type="text" id="name" />
        <input type="button" id="save" value="保存" onclick="CloseDiv('MyDiv','fade')" />
    </div>
    <br />
</body>
</html>
示例图：