JavaScript绝对居中弹出层
项目需要做绝对居中弹出层。学习完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" onclick="showNo()" /> </td> </tr> </table> </div> </form> </body> </html>
最终效果如下: