JS弹出信息层

1、弹出信息层之解决方案：

（一）主要思路：1、背景遮罩层 ；2、弹出层（即信息显示层）。

（二）主要解决的问题。

        1、背景遮罩层。

          （1）设置遮罩层的宽和高为document.body.clientHeight、document.body.clientWidth。

                 大家对clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看到内容的这个区域的高度，一般是最后一个工具条以下到状态栏以上的这个区域，与页面内容无关。

                 clientWidth 是对象可见的宽度，不包滚动条等边线，会随窗口的显示大小改变。

          （2）设置遮罩层的透明度和初始为隐藏以及Z坐标。

                 透明度：属性filter=“ alpha(Opacity=30)";//此透明度为30%。

                 初始设为隐藏：属性display="none";

                 Z坐标：zIndex=8888;这里遮罩层的Z轴坐标值为8888。//   注：遮罩层是在信息显示层的下面，所以这个值要比信息层的z轴坐标要小。

        2、要弹出的信息显示层。

          （1）设置信息显示层的宽、高和位置。

　　　　　　宽和高：自定义高度。width = 400px;height = 300px;

                 显示位置设置：left = ((document.body.clientWidth - width) > 0 ? (document.body.clientWidth - width) : 0) / 2 + "px";
                                     top = 200 + "px";  //left设置左边距，top距离上边沿。

           （2）设置初始隐藏。display=”none“;

           （3）信息显示层，浏览后关闭。

　　　　　　关闭主要是将信息显示层和背景遮罩层的display属性设为：none。

2、弹出信息层之Code：

（1）JS——Code

 function showWindow(Area, PointName, ItemId, Data, Iaqi) {
            var itemName;
            var width = 250;
            var height = 150;
            var infoDiv = document.getElementById("infoDiv");
            var zheZhaoDivBack = document.getElementById("zheZhaoDivBack");
            switch (ItemId) {
                case "1":
                    itemName = "SO2";
                    break;
                case "2":
                    itemName = "NO2";
                    break;
                case "3":
                    itemName = "03(1h)";
                    break;
                case "4": itemName = "03(8h)";
                    break;
                case "5": itemName = "PM10";
                    break;
                case "6":
                    itemName = "PM25";
                    break;
                case "7": itemName = "AQI";
                    break;
                case "8": itemName = "CO";
                    break;
            }
            $("#PointName").text(Area + PointName + itemName + "浓度:");
            $("#1Data").text(Data + "微克/立方米");
            $("#24Data").text(Iaqi + "微克 / 立方米");
            infoDiv.style.left = ((document.body.clientWidth - width) > 0 ? (document.body.clientWidth - width) : 0) / 2 + "px";
            infoDiv.style.top = 200 + "px";
            infoDiv.style.zIndex = 9999;
            infoDiv.style.width = width;
            infoDiv.style.height = height;
            infoDiv.style.border = "1px solid #D9CAAF";
            zheZhaoDivBack.style.height = document.body.clientHeight + "px";
            zheZhaoDivBack.style.width = document.body.clientWidth + "px";
            zheZhaoDivBack.style.display = "";
            zheZhaoDivBack.style.zIndex = 8888;
            infoDiv.style.display = "";
        }
        function closeWindow() {
            document.getElementById("zheZhaoDivBack").style.display = "none";
            document.getElementById("infoDiv").style.display = "none";
        }

（2）页面Code：

<!--层遮罩部分-->
    <div style="position: absolute; display: none; left: 0px; top: 0px; width: 100%;
        height: 100%; background-color: #000000; filter: alpha(Opacity=30);" id="zheZhaoDivBack">
    </div>
    <div align='center' style='position: absolute; padding: 0px 0px; display: none; left: 0px;
        top: 0px; width: 250; height: 150;' id='infoDiv'>
        <!--弹出层登录-->
        <div id="DataTetailLayer">
            <table class="tab_style003">
                <tr>
                    <td colspan="2" class="tab_style003_th tab_style003_th_bg2" id="PointName">
                    </td>
                </tr>
                <tr>
                    <td class="tab_style003_td">
                        最近1小时均值：
                    </td>
                    <td class="tab_style003_td" id="1Data">
                    </td>
                </tr>
                <tr>
                    <td class="tab_style003_td">
                        最近24小时均值：
                    </td>
                    <td class="tab_style003_td" id="24Data">
                    </td>
                </tr>
                <tr>
                    <td class="tab_style003_td">
                        最近30天均值：
                    </td>
                    <td class="tab_style003_td" id="30Data">
                    </td>
                </tr>
                <tr>
                    <td class="tab_style003_td" colspan="2">
                        <input type="button" οnclick="closeWindow()" value="关闭" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <!--层遮罩部分结束-->

3、效果图：

 

                

                

 

 

 

转载于:https://www.cnblogs.com/dean-Wei/archive/2013/05/03/3056671.html