IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

弹出窗口的兼容方案

记事本 2010-09-11 09:56:16 累计浏览 2,850 次
本机暂存

记录一下弹出窗口的兼容方案

以下是代码片段:

<!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>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>主页面</title>
 <style type="text/css">
 html, body {
  margin: 0;
  padding: 0;
 }
 body {
 }
 #div1 {
  height: 2000px;
 }
 #floatedLayer {
  position: fixed;
  _position: absolute;
 }
 </style>
</head>
<body>
 <div id="floatedLayer">
  <iframe src="demo.html" width="580" height="542" frameborder="no"></iframe>
 </div>
 <div id="div1"></div>
 <script type="text/javascript">
  var floatedLayer = document.getElementById("floatedLayer");
  function adjustPopupWin() {
   var height = document.documentElement.clientHeight,
    width = document.documentElement.clientWidth;
   floatedLayer.style.left = Math.max((width - floatedLayer.offsetWidth) / 2, 0) + "px";
   floatedLayer.style.top = Math.max((height - floatedLayer.offsetHeight) / 2, 0) + "px";
  }
 </script>
 <!--[if IE 6]>
 <script type="text/javascript">
  function adjustPopupWin() {
   var height = document.documentElement.clientHeight,
    width = document.documentElement.clientWidth;
   floatedLayer.style.left = Math.max((width - floatedLayer.offsetWidth) / 2, 0) + document.documentElement.scrollLeft + "px";
   floatedLayer.style.top = Math.max((height - floatedLayer.offsetHeight) / 2, 0) + document.documentElement.scrollTop + "px";
  }
  window.onscroll = adjustPopupWin;
 </script>
 <![endif]-->
 <script type="text/javascript">
  window.onresize = adjustPopupWin;
  adjustPopupWin();
 </script>
</body>
</html>

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,349)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,848)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  9. 什么是全栈工程师? (累计阅读 14,038)
  10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)