Javascript 弹出框未打开_Javascript_Html_Css

Javascript 弹出框未打开

javascript html css

Javascript 弹出框未打开,javascript,html,css,Javascript,Html,Css,我试图在点击一个链接时打开一个弹出框…我找到了这个解决方案：并应用了它，但是我无法打开弹出框。下面的代码是框架集的一部分。我使用了相同的CSS。注：JSFIDLE正在工作代码： var opener=document.getElementById（“opener”）； opener.onclick=函数（）{ var lightbox=document.getElementById（“lightbox”）， dimmer=document.createElement（“div”）； dimm

我试图在点击一个链接时打开一个弹出框…我找到了这个解决方案：并应用了它，但是我无法打开弹出框。下面的代码是框架集的一部分。我使用了相同的CSS。注：JSFIDLE正在工作

代码：


var opener=document.getElementById（“opener”）；
opener.onclick=函数（）{
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=函数（）{
document.body.removeChild（本文件）；
lightbox.style.visibility='hidden'；
}
文件.正文.附件（调光器）；
lightbox.style.visibility='visible'；
lightbox.style.top=window.innerHeight/2-50+'px'；
lightbox.style.left=window.innerWidth/2-100+'px'；
返回false；
}
测试灯箱

您的代码中缺少JSFIDLE所能做到的东西。默认情况下，它将JavaScript窗口中的代码包装到window.onload事件处理程序中。因为您的代码没有这样做，所以JavaScript会在创建opener链接之前运行，因此不会应用click处理程序。要解决此问题，请将JavaScript放入window.onload处理程序中，就像JSFIDLE为您所做的那样：

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;
  }
}

请与“Inspect Element”这样的开发工具交朋友。在控制台中，它用来表示您的错误

Uncaught TypeError: Cannot set property 'onclick' of null

这是因为您正在调用

document.getElementById（“opener”）在主体中，而开场白元素在主体中
在body标记之前加载文档时，将加载脚本
确保脚本位于开场白的位置之后
<!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>


#灯箱{
可见性：隐藏；
位置：绝对位置；
背景：红色；
边框：2px实心#3c；
颜色：白色；
z指数：100；
宽度：200px；
高度：100px；
填充：20px；
}
.调光器{
背景：#000；
位置：绝对位置；
不透明度：.5；
排名：0；
z指数：99；
}
测试灯箱
var opener=document.getElementById（“opener”）；
opener.onclick=函数（）{
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=函数（）{
document.body.removeChild（本文件）；
lightbox.style.visibility='hidden'；
}
文件.正文.附件（调光器）；
lightbox.style.visibility='visible'；
lightbox.style.top=window.innerHeight/2-50+'px'；
lightbox.style.left=window.innerWidth/2-100+'px'；
返回false；
}

一般来说，我在
标记的末尾定义了任何javascript，因为这是提高网站初始加载速度的优化策略之一。提琴有效吗？不确定问题是什么检查你的控制台。最近，由于chrome扩展，我的JS无法运行。让我们知道你的控制台是怎么说的。你能不能也包括CSS，这样我们就可以知道你最初是如何隐藏lightbox的。请注意：因为你使用的是HTML5 doctype，所以你真的不需要使用大写的标记。@Jezzabeanz控制台中没有任何内容……这可能是因为html是框架集的一部分吗？没问题！欢迎使用web开发！：）
<!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>