弹出框打不开

Question

I'm trying to get a pop-up box open upon clicking on a link...I found this solution: http://jsfiddle.net/loktar/rxGmk/ and applied it, however I'm failing to get the popup to open.我试图在点击链接时打开一个弹出框......我找到了这个解决方案： http : //jsfiddle.net/loktar/rxGmk/并应用了它，但是我没有得到弹出框打开。 The below code is part of a frameset.下面的代码是框架集的一部分。 I used the same CSS.我使用了相同的 CSS。 PS: the jsfiddle is working. PS：jsfiddle 正在工作。

Code:代码：

<!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

Please be friends with 'Inspect Element' like developer tools.请与“Inspect Element”（如开发人员工具）成为朋友。 In the console, it used to say your error在控制台中，它曾经说过你的错误

Uncaught TypeError: Cannot set property 'onclick' of null

It's because you are calling document.getElementById("opener");这是因为您正在调用document.getElementById("opener"); in your while your opener element is in the body.在你而你的开场白元素在身体里。

Your script will be loaded when the document is loaded BEFORE body tag.您的脚本将在文档加载 BEFORE body 标签时加载。

Make sure you have your script after where your opener is.确保在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>

In general, I define any javascript at the end of the <body> tag because it is one of the optimization strategies to improve initial loading speed of the website.一般来说，我在<body>标签的末尾定义任何 javascript，因为它是提高网站初始加载速度的优化策略之一。

Answer 2

Your code is missing something in your code that the jsFiddle does.您的代码缺少 jsFiddle 所做的代码中的某些内容。 By default, it wraps the code in the JavaScript window into a window.onload event handler.默认情况下，它将 JavaScript 窗口中的代码包装到 window.onload 事件处理程序中。 Because your code does not do this, your JavaScript runs before your opener link is created, so the click handler doesn't get applied.由于您的代码不执行此操作，因此您的 JavaScript 在创建打开链接之前运行，因此不会应用单击处理程序。 To fix this, put your JavaScript in a window.onload handler like the jsFiddle does for you:要解决此问题，请将您的 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