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");。

在正文标记之前加载文档时，将加载您的脚本。

确保在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 个答案: