JavaScript绝对居中弹出层-CSDN博客

项目需要做绝对居中弹出层。学习完W3C JavaScript 教程 http://www.w3school.com.cn/js/index.asp ，再参考网络思路探索效果如下：

1. <style type="text/css"></style>为CSS代码。

2. <script type="text/javascript"></script>为javascript代码。

3. Html文件中包含 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">引用后，JavaScript中document.documentElement生效，document.body无效。

4. JavaScript中"s4-workspace"为SharePoint特有元素。

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="PopUpCenter.aspx.cs" Inherits="PopUpCenter" %>

<!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 runat="server">
    <title>JavaScript</title>
    <style type="text/css">
    #divShadow 
    {
        display:none;
        z-index:1000;
        background-color:Gray;
        filter:alpha(opacity=70);opacity:0.7;
        width:100%;height:100%;
        position: fixed;
        left:0;top:0;overflow: hidden;
    }
    
     #divPopUp
    {
        margin:0px;
        z-index:1001; 
        padding:3px;
        width:490px;
        height:368px;
        vertical-align:middle;
        text-align:center; 
        background-color:#ffffff;
        border-width:0px;
        position:fixed; 
        text-align:center;
    }
        
    </style>

    <script type="text/javascript">
        function getRange() {
            try {
                var left = document.body.scrollLeft;
                var height = document.body.scrollHeight;
                var width = document.body.scrollWidth;
                var clientHeight = document.body.clientHeight;

                //文件包含<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                if (document.documentElement) {
                    left = document.documentElement.scrollLeft;
                    height = document.documentElement.scrollHeight;
                    width = document.documentElement.scrollWidth;
                    clientHeight = document.documentElement.clientHeight;
                }

                var top;
                if (document.documentElement) {
                    top = document.documentElement.scrollTop;
                }
                else if (document.body) {
                    top = document.body.scrollTop;
                }
                // SharePoint
                else if (GetCachedElement("s4-workspace") != null) {
                    top = GetCachedElement("s4-workspace").scrollTop;
                }

                return { top: top, left: left, height: height, width: width, clientHeight: clientHeight };
            }
            catch (err) {
                alert(err.Message);
            }
        }

        function showNo() {
            document.getElementById("divShadow").style.display = "none";
            document.getElementById("divPopUp").style.display = "none";
            return false;
        }

        function showFloat() {
            var range = getRange();
            document.getElementById("divShadow").style.top = 0 + "px";
            document.getElementById("divShadow").style.left = 0 + "px";
            document.getElementById("divShadow").style.width = range.width + "px";
            document.getElementById("divShadow").style.height = range.height + "px";
            document.getElementById("divShadow").style.display = "block";
            document.getElementById("divPopUp").style.display = "";

            document.getElementById("divPopUp").style.left = range.left
                + (range.width - document.getElementById("divPopUp").offsetWidth) / 2
                + "px";

            document.getElementById("divPopUp").style.top = range.top
                + (range.clientHeight - document.getElementById("divPopUp").offsetHeight) / 2
                + "px";

            return false;
        }

    </script>
</head>
<body>
    <form id="form1" runat="server">

    <div id="divBasic">
        <table id="tBasic" width="100%">
            <tr>
                <td>
                    <img id="ibProduct" alt="sina" src="http://d1.leju.com/ia/2013/05/28/51a44bb3463c6img.jpg" 
                    onclick = "showFloat()" />
                    <p>点击上面图片弹出</p>
                </td>
            </tr>
        </table>
    </div>

    <div id="divShadow"></div>

    <div id="divPopUp" style="display:none">
        <table  width="100%">
            <tr>
                <td  class="popTd" >
                    <img id="ibDetail" alt="sinablog" width="433px" height="295px" src="http://s8.sinaimg.cn/mw690/4b8ccae1gdea2bddd3957&690" />
                </td>
            </tr>
            <tr>
                <td style = "border-style: none; text-align:right;" >
                    <input id="bClose" type="button" value="Close" οnclick="showNo()" />
                </td>
            </tr>
        </table>
    </div>

    </form>
</body>
</html>