遮罩层《一》

javascript 和css样式

 <script type="text/javascript">
        function showdiv() {
            document.getElementById("bgdiv").style.height = window.document.documentElement.clientHeight + "px";
            if (window.document.body.scrollHeight > window.document.documentElement.clientHeight) {
                document.getElementById("bgdiv").style.height = window.document.body.scrollHeight + "px";
            }
            document.getElementById("bgdiv").style.display = "block";
            document.getElementById("showDiv").style.display = "block";
        }
        function hidediv() {
            document.getElementById("bgdiv").style.display = 'none';
            document.getElementById("showDiv").style.display = 'none';
        }

        function webChart() {
            var eventId = document.getElementById("eventId").value;
            var eventName = document.getElementById("eventName").value;

            if (eventId == 0) {
                alert("请先进行选择");
            }
            else {
                document.getElementById("center-iframe").src = "map/eventMap.aspx?_EventID=" + eventId;
                document.getElementById("divTitle").innerText = "图表统计显示:" + eventName;
                document.getElementById("showDiv").style.width = 96 + '%';
                document.getElementById("showDiv").style.height = 90 + '%';
                //window.document.documentElement.clientHeight - 2 - 50;
                document.getElementById("showDiv").style.left = 2 + '%';
                document.getElementById("showDiv").style.right = 2 + '%';
                document.getElementById("showDiv").style.top = 6 + '%';
                //(window.document.documentElement.clientWidth - 900) / 2;
                document.getElementById("center-iframe").style.height = window.document.documentElement.clientHeight - 2 - 50;
                showdiv();
            }
        }

    </script>
    <style type="text/css">
        .style3
        {
            width: 1200px;
            height: 90%;
            position: fixed;
            left: 15%;
            top: 25px;
            border: 1px solid #8DB2E3;
            background-color: #FFFFFF;
        }

        .alphaStyle
        {
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: Gray;
            z-index: 2;
            filter: alpha(opacity=30);
        }
    </style>

遮罩层DIv，放在html页面中就行

 <!--遮罩层 begin-->
                    <div id="bgdiv" class="alphaStyle" style="display: none;">
                    </div>
                    <!--遮罩层 end-->
                    <div id="showDiv" class="style3" style="display: none; z-index: 3;">
                        <table cellpadding="0" cellspacing="0" border="0" style=" 100%;">
                            <tr>
                                <td style="font-weight: bold; height: 25px; text-align: left; padding-left: 5px; border-bottom: 1px solid #8DB2E3">
                                    <asp:Label ID="divTitle" runat="server" Text=""></asp:Label>
                                </td>
                                <td style="height: 25px; text-align: right; padding-right: 5px; border-bottom: 1px solid #8DB2E3">
                                    <img src="../Images/icons/cross.gif" style="cursor: pointer;" alt="关闭" title="关闭" onclick="hidediv()" />
                                </td>
                            </tr>
                            <tr>
                                <td colspan="2">
                                    <iframe id="center-iframe" width="90%" height="100%" name="main" frameborder="0" scrolling="auto" src="" style="border: 0px none; padding-top: 0;"></iframe>
                                </td>
                            </tr>

                        </table>
                    </div>

最后是点击按钮，用来显示遮罩层的

  <input type="button" value="弹出遮罩层" id="btn" onclick="webChart()" />