弹出框打不开

Question

我试图在点击链接时打开一个弹出框......我找到了这个解决方案： http : //jsfiddle.net/loktar/rxGmk/并应用了它，但是我没有得到弹出框打开。 下面的代码是框架集的一部分。 我使用了相同的 CSS。 PS：jsfiddle 正在工作。

代码：

<!DOCTYPE HTML>
<HTML>
<HEAD>
<link rel="stylesheet" type="text/css" href="custom.css">


<script>
var opener = document.getElementById("opener");

opener.onclick = function(){

    var lightbox = document.getElementById("lightbox"),
        dimmer = document.createElement("div");

    dimmer.style.width =  window.innerWidth + 'px';
    dimmer.style.height = window.innerHeight + 'px';
    dimmer.className = 'dimmer';

    dimmer.onclick = function(){
        document.body.removeChild(this);   
        lightbox.style.visibility = 'hidden';
    }

    document.body.appendChild(dimmer);

    lightbox.style.visibility = 'visible';
    lightbox.style.top = window.innerHeight/2 - 50 + 'px';
    lightbox.style.left = window.innerWidth/2 - 100 + 'px';
    return false;
}
</script>
</HEAD>

<body>

     <div id="lightbox">Testing out the lightbox</div>
<a href="#" id="opener">Click me</a>
</body>

</HTML>

Answer 1

请与“Inspect Element”（如开发人员工具）成为朋友。 在控制台中，它曾经说过你的错误

Uncaught TypeError: Cannot set property 'onclick' of null

这是因为您正在调用document.getElementById("opener"); 在你而你的开场白元素在身体里。

您的脚本将在文档加载 BEFORE body 标签时加载。

确保在opener所在的位置之后有你的脚本。

<!DOCTYPE html>
<html>
<head>
    <!-- you can replace with your link to css file -->
    <style>
        #lightbox{
          visibility:hidden;
          position:absolute;
          background:red;
          border:2px solid #3c3c3c;
          color:white;
          z-index:100;
          width: 200px;
          height:100px;
          padding:20px;
        }

        .dimmer{
          background: #000;
          position: absolute;
          opacity: .5;
          top: 0;
          z-index:99;
        }
    </style>
</head>

<body>
  <div id="lightbox">Testing out the lightbox</div>
  <a href="#" id="opener">Click me</a>

  <!-- script is added after id="opener" is defined -->
  <script>
    var opener = document.getElementById("opener");

    opener.onclick = function(){

    var lightbox = document.getElementById("lightbox"),
        dimmer = document.createElement("div");

    dimmer.style.width =  window.innerWidth + 'px';
    dimmer.style.height = window.innerHeight + 'px';
    dimmer.className = 'dimmer';

    dimmer.onclick = function(){
        document.body.removeChild(this);   
        lightbox.style.visibility = 'hidden';
    }

    document.body.appendChild(dimmer);

    lightbox.style.visibility = 'visible';
    lightbox.style.top = window.innerHeight/2 - 50 + 'px';
    lightbox.style.left = window.innerWidth/2 - 100 + 'px';
    return false;
  }
</script>

</body>


</html>

一般来说，我在<body>标签的末尾定义任何 javascript，因为它是提高网站初始加载速度的优化策略之一。

Answer 2

您的代码缺少 jsFiddle 所做的代码中的某些内容。 默认情况下，它将 JavaScript 窗口中的代码包装到 window.onload 事件处理程序中。 由于您的代码不执行此操作，因此您的 JavaScript 在创建打开链接之前运行，因此不会应用单击处理程序。 要解决此问题，请将您的 JavaScript 放在 window.onload 处理程序中，就像 jsFiddle 为您所做的那样：

window.addEventListener('load', function() {
  var opener = document.getElementById("opener");

  opener.onclick = function(){

    var lightbox = document.getElementById("lightbox"),
        dimmer = document.createElement("div");

    dimmer.style.width =  window.innerWidth + 'px';
    dimmer.style.height = window.innerHeight + 'px';
    dimmer.className = 'dimmer';

    dimmer.onclick = function(){
        document.body.removeChild(this);   
        lightbox.style.visibility = 'hidden';
    }

    document.body.appendChild(dimmer);

    lightbox.style.visibility = 'visible';
    lightbox.style.top = window.innerHeight/2 - 50 + 'px';
    lightbox.style.left = window.innerWidth/2 - 100 + 'px';
    return false;
  }
}

弹出框打不开

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-09-14 18:57:12

解决方案2
0 2015-09-14 18:41:04

弹出框打不开

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-09-14 18:57:12

解决方案2 0 2015-09-14 18:41:04

解决方案1
2 已采纳 2015-09-14 18:57:12

解决方案2
0 2015-09-14 18:41:04