Fatal编程技术网
  • javascript/
  • Javascript 单击页面上的其他位置时关闭Lightbox

Javascript 单击页面上的其他位置时关闭Lightbox

javascript html

Javascript 单击页面上的其他位置时关闭Lightbox,javascript,html,lightbox,Javascript,Html,Lightbox,我正在尝试使用CC模板设计网站，并尝试按照以下要求实现Lightbox： 灯箱显示良好，但我遇到的问题是，如果我在灯箱外单击，什么也不会发生，而且也没有关闭按钮 一般来说，我对JavaScript和web开发非常初级，所以请温柔一点 这是从W3中提取的lightbox代码，我对其进行了修改以使用我自己的图像，并添加了colwrap div，以便可以并排放置图像： <div id="myModal" class="modal"> <span class="close cursor

我正在尝试使用CC模板设计网站，并尝试按照以下要求实现Lightbox：

灯箱显示良好，但我遇到的问题是，如果我在灯箱外单击，什么也不会发生，而且也没有关闭按钮

一般来说，我对JavaScript和web开发非常初级，所以请温柔一点

这是从W3中提取的lightbox代码，我对其进行了修改以使用我自己的图像，并添加了colwrap div，以便可以并排放置图像：

<div id="myModal" class="modal">
<span class="close cursor" onclick="closeModal()">&times;</span>
<div class="modal-content">

<div class="mySlides">
  <div class="numbertext">1 / 4</div>
  <img src="images/team/test2.jpg" style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">2 / 4</div>
  <img src="images/team/test3.jpg"  style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">3 / 4</div>
  <img src="images/team/test4.jpg"  style="width:100%">
</div>

<div class="mySlides">
  <div class="numbertext">4 / 4</div>
  <img src="images/team/test5.jpg"  style="width:100%">
</div>

<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

<div class="caption-container">
  <p id="caption"></p>
</div>

<div id="colwrap">

  <img class="demo cursor" src="images/team/test2.jpg" style="width:20%" onclick="currentSlide(1)" alt="Jacob Wilson - Vocals">


  <img class="demo cursor" src="images/team/test3.jpg" style="width:20%" onclick="currentSlide(2)" alt="Kevin Lee - Lead Guitar">


  <img class="demo cursor" src="images/team/test4.jpg" style="width:22%; height:5%;" onclick="currentSlide(3)" alt="Jeff Bridges - Drums">


  <img class="demo cursor" src="images/team/test5.jpg" style="width:20%" onclick="currentSlide(4)" alt="Shikamaru Nara - Bass">

  </div>
要跨越任何不是“close cursor”的类，模式左上角将有一个小X，您可以使用它来关闭lightbox。我真的不知道这行在做什么，因为我可以将它设置为跨越一个不存在的类，它仍然会给出一个小X。但是如果它是接近游标，我就不会得到这个X

很抱歉这篇格式不好的文章，我不确定应该包含什么代码，因为它太长了。任何想法都将不胜感激。

您可以尝试一个名为
stopPropagation（）
调用事件对象的函数：

我在这个演示中使用了change 2功能：

function plusSlides(event, n) {
  event.stopPropagation();
  showSlides(slideIndex += n);
}
function currentSlide(event, n) {
  event.stopPropagation();
  showSlides(slideIndex = n);
}
和html地址： 
！希望这能有所帮助
 您可以尝试从事件对象调用名为
stopPropagation（）
的函数：

我在这个演示中使用了change 2功能：


function plusSlides(event, n) {
  event.stopPropagation();
  showSlides(slideIndex += n);
}
function currentSlide(event, n) {
  event.stopPropagation();
  showSlides(slideIndex = n);
}


和html地址：

！希望这能有所帮助
 检查代码片段，希望对您有所帮助。



函数openModal（）{
document.getElementById（'myModal'）.style.display=“block”；
}
函数closeModal（）{
document.getElementById（'myModal'）.style.display=“无”；
}
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
var captionText=document.getElementById（“caption”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i

正文{
字体系列：Verdana，无衬线；
保证金：0；
}
* {
框大小：边框框；
}
.row>列{
填充：0 8px；
}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}
.栏目{
浮动：左；
宽度：25%；
}
/*模态（背景）*/
.莫代尔{
显示：无；
位置：固定；
z指数：1；
填充顶部：100px；
左：0；
排名：0；
宽度：100%；
身高：100%；
溢出：自动；
背景色：黑色；
}
/*模态内容*/
.模态内容{
位置：相对位置；
背景色：#fefe；
保证金：自动；
填充：0；
宽度：90%；
最大宽度：1200px；
}
/*关闭按钮*/
.结束{
颜色：白色；
位置：绝对位置；
顶部：10px；
右：25px；
字体大小：35px；
字体大小：粗体；
}
.关闭：悬停，
.结束：聚焦{
颜色：#999；
文字装饰：无；
光标：指针；
}
迈斯利德斯先生{
显示：无；
}
.光标{
光标：指针
}
/*下一步和上一步按钮*/
.prev，
.下一个{
光标：指针；
位置：绝对位置；
最高：50%；
宽度：自动；
填充：16px；
利润上限：-50px；
颜色：白色；
字体大小：粗体；
字体大小：20px；
过渡：0.6s缓解；
边界半径：0 3px 3px 0；
用户选择：无；
-webkit用户选择：无；
}
/*将“下一步按钮”置于右侧*/
.下一个{
右：0；
边界半径：3px 0 3px；
}
/*在悬停时，添加一个黑色背景色，带有一点透明*/
.prev:悬停，
.下一步：悬停{
背景色：rgba（0,0,0,0.8）；
}
/*数字文本（1/3等）*/
.numbertext{
颜色：#F2F2；
字体大小：12px；
填充：8px 12px；
位置：绝对位置；
排名：0；
}
img{
保证金底部：-4px；
}
.标题容器{
文本对齐：居中；
背景色：黑色；
填充：2x16px；
颜色：白色；
}
.演示{
不透明度：0.6；
}
.主动，
.演示：悬停{
不透明度：1；
}
悬停阴影{
过渡：0.3s
}
.悬停阴影：悬停{
长方体阴影：0 4px 8px 0 rgba（0,0,0,0.2），0 6px 20px 0 rgba（0,0,0,0.19）
}


灯箱
&时代；
1/4
2/4
3/4
4/4
❮
❯



检查代码片段，希望对您有所帮助。



函数openModal（）{
document.getElementById（'myModal'）.style.display=“block”；
}
函数closeModal（）{
document.getElementById（'myModal'）.style.display=“无”；
}
var slideIndex=1；
放映幻灯片（幻灯片索引）；
函数加滑块（n）{
放映幻灯片（幻灯片索引+=n）；
}
功能当前幻灯片（n）{
放映幻灯片（幻灯片索引=n）；
}
功能演示幻灯片（n）{
var i；
var slides=document.getElementsByClassName（“mySlides”）；
var dots=document.getElementsByClassName（“演示”）；
var captionText=document.getElementById（“caption”）；
如果（n>slides.length）{slideIndex=1}
如果（n<1）{slideIndex=slides.length}
对于（i=0；i<!DOCTYPE html>
    <html>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    body {
      font-family: Verdana, sans-serif;
      margin: 0;
    }

    * {
      box-sizing: border-box;
    }

    .row > .column {
      padding: 0 8px;
    }

    .row:after {
      content: "";
      display: table;
      clear: both;
    }

    .column {
      float: left;
      width: 25%;
    }

    /* The Modal (background) */
    .modal {
      display: none;
      position: fixed;
      z-index: 1;
      padding-top: 100px;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: black;
    }

    /* Modal Content */
    .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      width: 90%;
      max-width: 1200px;
    }

    /* The Close Button */
    .close {
      color: white;
      position: absolute;
      top: 10px;
      right: 25px;
      font-size: 35px;
      font-weight: bold;
    }

    .close:hover,
    .close:focus {
      color: #999;
      text-decoration: none;
      cursor: pointer;
    }

    .mySlides {
      display: none;
    }

    .cursor {
      cursor: pointer
    }

    /* Next & previous buttons */
    .prev,
    .next {
      cursor: pointer;
      position: absolute;
      top: 50%;
      width: auto;
      padding: 16px;
      margin-top: -50px;
      color: white;
      font-weight: bold;
      font-size: 20px;
      transition: 0.6s ease;
      border-radius: 0 3px 3px 0;
      user-select: none;
      -webkit-user-select: none;
    }

    /* Position the "next button" to the right */
    .next {
      right: 0;
      border-radius: 3px 0 0 3px;
    }

    /* On hover, add a black background color with a little bit see-through */
    .prev:hover,
    .next:hover {
      background-color: rgba(0, 0, 0, 0.8);
    }

    /* Number text (1/3 etc) */
    .numbertext {
      color: #f2f2f2;
      font-size: 12px;
      padding: 8px 12px;
      position: absolute;
      top: 0;
    }

    img {
      margin-bottom: -4px;
    }

    .caption-container {
      text-align: center;
      background-color: black;
      padding: 2px 16px;
      color: white;
    }

    .demo {
      opacity: 0.6;
    }

    .active,
    .demo:hover {
      opacity: 1;
    }

    img.hover-shadow {
      transition: 0.3s
    }

    .hover-shadow:hover {
      box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)
    }
    </style>
    <body>

    <h2 style="text-align:center">Lightbox</h2>

    <div class="row">
      <div class="column">
        <img src="1.png" style="width:100%" onclick="openModal(event);currentSlide(event,1)" class="hover-shadow cursor">
      </div>
      <div class="column">
        <img src="2.jpeg" style="width:100%" onclick="openModal(event);currentSlide(event,2)" class="hover-shadow cursor">
      </div>
      <div class="column">
        <img src="3.jpg" style="width:100%" onclick="openModal(event);currentSlide(event,3)" class="hover-shadow cursor">
      </div>
      <div class="column">
        <img src="4.jpg" style="width:100%" onclick="openModal(event);currentSlide(event,4)" class="hover-shadow cursor">
      </div>
    </div>

    <div id="myModal" class="modal">
      <span class="close cursor" onclick="closeModal(event)">&times;</span>
      <div class="modal-content">

        <div class="mySlides">
          <div class="numbertext">1 / 4</div>
          <img src="1.png" style="width:100%">
        </div>

        <div class="mySlides">
          <div class="numbertext">2 / 4</div>
          <img src="2.jpeg" style="width:100%">
        </div>

        <div class="mySlides">
          <div class="numbertext">3 / 4</div>
          <img src="3.jpg" style="width:100%">
        </div>

        <div class="mySlides">
          <div class="numbertext">4 / 4</div>
          <img src="4.jpg" style="width:100%">
        </div>

        <a class="prev" onclick="plusSlides(event, -1)">&#10094;</a>
        <a class="next" onclick="plusSlides(event, 1)">&#10095;</a>

        <div class="caption-container">
          <p id="caption"></p>
        </div>


        <div class="column">
          <img class="demo cursor" src="1.png" style="width:100%" onclick="currentSlide(event,1)" alt="Nature and sunrise">
        </div>
        <div class="column">
          <img class="demo cursor" src="2.jpeg" style="width:100%" onclick="currentSlide(event,2)" alt="Trolltunga, Norway">
        </div>
        <div class="column">
          <img class="demo cursor" src="3.jpg" style="width:100%" onclick="currentSlide(event, 3)" alt="Mountains and fjords">
        </div>
        <div class="column">
          <img class="demo cursor" src="4.jpg" style="width:100%" onclick="currentSlide(event,4)" alt="Northern Lights">
        </div>
      </div>
    </div>

    <script>
    window.addEventListener('click', clickedOutside, false);
    function clickedOutside(event){
        event.stopPropagation();
        closeModal() ;
    }
    function openModal(event) {
       event.stopPropagation();
        document.getElementById('myModal').style.display = "block";
    }

    function closeModal(event) {
      document.getElementById('myModal').style.display = "none";
    }

    var slideIndex = 1;
    showSlides(slideIndex);

    function plusSlides(event,n) {
       event.stopPropagation();
        showSlides(slideIndex += n);
    }

    function currentSlide(event,n) {
        event.stopPropagation();
        showSlides(slideIndex = n);
    }


    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("demo");
      var captionText = document.getElementById("caption");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
          slides[i].style.display = "none";
      }
      for (i = 0; i < dots.length; i++) {
          dots[i].className = dots[i].className.replace(" active", "");
      }
      slides[slideIndex-1].style.display = "block";
      dots[slideIndex-1].className += " active";
      captionText.innerHTML = dots[slideIndex-1].alt;
    }
    </script>

    </body>
    </html>