Javascript灯箱在html部分标签内不起作用

时间:2015-12-08 02:30:26

标签: javascript html css

Above is with section tag and below is without我需要在section标签中放置灯箱。只是不确定为什么会发生这种情况或如何覆盖它。灯箱正在出现但它不会关闭并位于图像后面。这是代码:

 <section id="XXX">
 <div id="light" class="white_content">This is the lightbox content. <a href         = "javascript:void(0)" onclick =   "document.getElementById('light').style.display='none';document.getElementById(' fade').style.display='none'">Close</a></div>
<div id="fade" class="black_overlay"></div>


  <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
                    <img src="Image.jpg" alt="Image" height="256" width="300">
                    </a>

 </section>

没有什么在CSS中表明那里存在问题......

       .black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index:1001;
    -moz-opacity: 0.8;
    opacity:.80;
    filter: alpha(opacity=80);
}
.white_content {
    display: none;
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    padding: 16px;
    border: 16px solid orange;
    background-color: white;
    z-index:1002;
    overflow: auto;
}

感谢。

1 个答案:

答案 0 :(得分:0)

控制台显示:

  

未捕获的TypeError:无法读取属性&#39; style&#39;为null

查看您的代码

getElementById(' fade').
               ^^

学习使用开发者控制台,以便找到这些拼写错误。

&#13;
&#13;
.black_overlay {
  display: none;
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index: 1001;
  -moz-opacity: 0.8;
  opacity: .80;
  filter: alpha(opacity=80);
}
.white_content {
  display: none;
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  padding: 16px;
  border: 16px solid orange;
  background-color: white;
  z-index: 1002;
  overflow: auto;
}
&#13;
<section id="XXX">
  <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
  </div>
  <div id="fade" class="black_overlay"></div>


  <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
    <img src="Image.jpg" alt="Image" height="256" width="300">
  </a>

</section>
&#13;
&#13;
&#13;