javascript - 如何关闭覆盖屏幕的div

标签 javascript html gallery

在我的网站中，我有一个页面用于放置我的照片。现在，我正在尝试创建一个 JavaScript 函数，允许我以更大的比例显示用户点击的照片。为此，当用户单击一张照片时，会出现包含其他版本照片(未裁剪)的“模态”类。这部分按预期工作。当我试图关闭那个更大的图像时，问题就出现了。有人可以根据我已经完成的代码帮助我吗？ (这是一个大学项目，我想保留我已经展示给老师的代码)。

var imagens = document.getElementsByClassName("imagens");
for(var i=0; i<imagens.length; i++){
    imagens[i].addEventListener("click", function () {
        //console.log(this.id);
        var splitedId = this.id.split("-");
        var IddivGrande = "grande-"+ splitedId[1];
        var imagemGrande = document.getElementById(IddivGrande);
        var modal = document.getElementById("modal");

        modal.style.display="block";
        imagemGrande.style.display="block";

       var span = document.getElementsByClassName("close");
       function clicar() {
            var botao = document.querySelector("span").click();
        }
        if(clicar) {
                modal.style.display = "none";
        }
    })
}
body{
    margin:0;
    font-family: "Helvetica", serif;
}
/*main*/
article{
    display: block;
    position: relative;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
    margin-top:10%;
    margin-bottom: 10%;
}
h3{
    display: block;
    position: relative;
    top:0;
    font-size: 15px;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
}
body>main>article>img{
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top:10%;
}
#grande-01 {
    display: none;
    position: relative;
    top:4%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-02 {
    display: none;
    position: relative;
    top:15%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-03 {
    display: none;
    position: relative;
    top:20%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-04 {
    display: none;
    position: relative;
    top:30%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-05 {
    display: none;
    position: relative;
    top:40%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-06 {
    display: none;
    position: relative;
    top:50%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-07 {
    display: none;
    position: relative;
    top:65%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-08 {
    display: none;
    position: relative;
    top:75%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-09 {
    display: none;
    position: relative;
    top:85%;
    left: 50%;
    transform: translateX(-50%);
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* The Close Button */
.close {
    display: block;
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/*tablet---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px){
    article{
        width: 80%;
    }
    h3{
        font-size: 23px;
        left: 0;
        transform: none;
        margin-left: 1%;
    }
    body>main>article>img{
        display: inline-block;
        left: 0;
        transform: none;
        margin: 0 1%;
        margin-bottom: 5%;
    }
    #grande-01, #grande-02, #grande-03, #grande-04, #grande-05, #grande-06, #grande-07, #grande-08, #grande-09{
        top:50%;
        transform: translateY(-50%) translateX(-50%);
    }
}
/*laptop----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1024px){
    article{
        width: 90%;
    }
    h3{
        font-size: 25px;
        width: 350px;
    }
}
/*laptopL----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1440px){
    h3{
        font-size: 30px;
        width: 400px;
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Portraits</title>
    <link rel="stylesheet" type="text/css" href="css/css_portraits.css">
    <meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<main>
    <article>
        <h3>Portraits</h3>
        <img class="imagens"
             id="pequeno-01"
             srcset="imagens/portraits/fotos_quadradas/Ines1_400.png 400w,
                                 imagens/portraits/fotos_quadradas/Ines1_350.png 350w,
                                 imagens/portraits/fotos_quadradas/Ines1_200.png 200w"
             sizes="(min-width: 1440px) 400px,
                                (min-width: 1024px) 350px,
                                 200px"
             src="imagens/portraits/fotos_quadradas/Ines1_200.png" alt="Ines1">
        <img class="imagens"
             id="pequeno-02"
             srcset="imagens/portraits/fotos_quadradas/Ines2_400.png 400w,
                                 imagens/portraits/fotos_quadradas/Ines2_350.png 350w,
                                 imagens/portraits/fotos_quadradas/Ines2_200.png 200w"
             sizes="(min-width: 1440px) 400px,
                                (min-width: 1024px) 350px,
                                 200px"
             src="imagens/portraits/fotos_quadradas/Ines2_200.png" alt="Ines2">
        <img class="imagens"
             id="pequeno-03"
             srcset="imagens/portraits/fotos_quadradas/Ines3_400.png 400w,
                                 imagens/portraits/fotos_quadradas/Ines3_350.png 350w,
                                 imagens/portraits/fotos_quadradas/Ines3_200.png 200w"
             sizes="(min-width: 1440px) 400px,
                                (min-width: 1024px) 350px,
                                 200px"
             src="imagens/portraits/fotos_quadradas/Ines3_200.png" alt="Ines3">
        <img class="imagens"
             id="pequeno-04"
             srcset="imagens/portraits/fotos_quadradas/Rafa1_400.png 400w,
                                 imagens/portraits/fotos_quadradas/Rafa1_350.png 350w,
                                 imagens/portraits/fotos_quadradas/Rafa1_200.png 200w"
             sizes="(min-width: 1440px) 400px,
                                (min-width: 1024px) 350px,
                                 200px"
             src="imagens/portraits/fotos_quadradas/Rafa1_200.png" alt="Rafa1">
        <img class="imagens"
             id="pequeno-05"
             srcset="imagens/portraits/fotos_quadradas/Rafa2_400.png 400w,
                                 imagens/portraits/fotos_quadradas/Rafa2_350.png 350w,
                                 imagens/portraits/fotos_quadradas/Rafa2_200.png 200w"
             sizes="(min-width: 1440px) 400px,
                                (min-width: 1024px) 350px,
                                 200px"
             src="imagens/portraits/fotos_quadradas/Rafa2_200.png" alt="Rafa2">
        <img class="imagens"
             id="pequeno-06"
             srcset="imagens/portraits/fotos_quadradas/Rafa3_400.png 400w,
                                 imagens/portraits/fotos_quadradas/Rafa3_350.png 350w,
                                 imagens/portraits/fotos_quadradas/Rafa3_200.png 200w"
             sizes="(min-width: 1440px) 400px,
                                (min-width: 1024px) 350px,
                                 200px"
             src="imagens/portraits/fotos_quadradas/Rafa3_200.png" alt="Rafa3">
        <img class="imagens"
             id="pequeno-07"
             srcset="imagens/portraits/fotos_quadradas/Sara1_400.png 400w,
                                 imagens/portraits/fotos_quadradas/Sara1_350.png 350w,
                                 imagens/portraits/fotos_quadradas/Sara1_200.png 200w"
             sizes="(min-width: 1440px) 400px,
                                (min-width: 1024px) 350px,
                                 200px"
             src="imagens/portraits/fotos_quadradas/Sara1_200.png" alt="Sara1">
        <img class="imagens"
             id="pequeno-08"
             srcset="imagens/portraits/fotos_quadradas/Sara2_400.png 400w,
                                 imagens/portraits/fotos_quadradas/Sara2_350.png 350w,
                                 imagens/portraits/fotos_quadradas/Sara2_200.png 200w"
             sizes="(min-width: 1440px) 400px,
                                (min-width: 1024px) 350px,
                                 200px"
             src="imagens/portraits/fotos_quadradas/Sara2_200.png" alt="Sara2">
        <img class="imagens"
             id="pequeno-09"
             srcset="imagens/portraits/fotos_quadradas/Sara3_400.png 400w,
                                 imagens/portraits/fotos_quadradas/Sara3_350.png 350w,
                                 imagens/portraits/fotos_quadradas/Sara3_200.png 200w"
             sizes="(min-width: 1440px) 400px,
                                (min-width: 1024px) 350px,
                                 200px"
             src="imagens/portraits/fotos_quadradas/Sara3_200.png" alt="Sara3">

        <div class="modal" id="modal">
            <img id="grande-01"
                 srcset="imagens/portraits/fotos_grandes/Ines1_900.png 900w,
                         imagens/portraits/fotos_grandes/Ines1_600.png 600w,
                         imagens/portraits/fotos_grandes/Ines1_224.png 224w"
                 sizes="(min-width: 1440px) 900px,
                                (min-width: 768px) 600px,
                                 224px"
                 src="imagens/portraits/fotos_grandes/Ines1_224.png" alt="imagem_grande1">
            <img id="grande-02"
                 srcset="imagens/portraits/fotos_grandes/Ines2_900.png 900w,
                         imagens/portraits/fotos_grandes/Ines2_600.png 600w,
                         imagens/portraits/fotos_grandes/Ines2_224.png 224w"
                 sizes="(min-width: 1440px) 900px,
                                (min-width: 768px) 600px,
                                 224px"
                 src="imagens/portraits/fotos_grandes/Ines2_224.png" alt="imagem_grande2">
            <img id="grande-03"
                 srcset="imagens/portraits/fotos_grandes/Ines3_900.png 900w,
                         imagens/portraits/fotos_grandes/Ines3_600.png 600w,
                         imagens/portraits/fotos_grandes/Ines3_224.png 224w"
                 sizes="(min-width: 1440px) 900px,
                                (min-width: 768px) 600px,
                                 224px"
                 src="imagens/portraits/fotos_grandes/Ines3_224.png" alt="imagem_grande3">
            <img id="grande-04"
                 srcset="imagens/portraits/fotos_grandes/Rafa1_900.png 900w,
                         imagens/portraits/fotos_grandes/Rafa1_600.png 600w,
                         imagens/portraits/fotos_grandes/Rafa1_224.png 224w"
                 sizes="(min-width: 1440px) 900px,
                                (min-width: 768px) 600px,
                                 224px"
                 src="imagens/portraits/fotos_grandes/Rafa1_224.png" alt="imagem_grande4">
            <img id="grande-05"
                 srcset="imagens/portraits/fotos_grandes/Rafa2_900.png 900w,
                         imagens/portraits/fotos_grandes/Rafa2_600.png 600w,
                         imagens/portraits/fotos_grandes/Rafa2_224.png 224w"
                 sizes="(min-width: 1440px) 900px,
                                (min-width: 768px) 600px,
                                 224px"
                 src="imagens/portraits/fotos_grandes/Rafa2_224.png" alt="imagem_grande5">
            <img id="grande-06"
                 srcset="imagens/portraits/fotos_grandes/Rafa3_900.png 900w,
                         imagens/portraits/fotos_grandes/Rafa3_600.png 600w,
                         imagens/portraits/fotos_grandes/Rafa3_224.png 224w"
                 sizes="(min-width: 1440px) 900px,
                                (min-width: 768px) 600px,
                                 224px"
                 src="imagens/portraits/fotos_grandes/Rafa3_224.png" alt="imagem_grande6">
            <img id="grande-07"
                 srcset="imagens/portraits/fotos_grandes/Sara1_900.png 900w,
                         imagens/portraits/fotos_grandes/Sara1_600.png 600w,
                         imagens/portraits/fotos_grandes/Sara1_224.png 224w"
                 sizes="(min-width: 1440px) 900px,
                                (min-width: 768px) 600px,
                                 224px"
                 src="imagens/portraits/fotos_grandes/Sara2_224.png" alt="imagem_grande7">
            <img id="grande-08"
                 srcset="imagens/portraits/fotos_grandes/Sara2_900.png 900w,
                         imagens/portraits/fotos_grandes/Sara2_600.png 600w,
                         imagens/portraits/fotos_grandes/Sara2_224.png 224w"
                 sizes="(min-width: 1440px) 900px,
                                (min-width: 768px) 600px,
                                 224px"
                 src="imagens/portraits/fotos_grandes/Sara2_224.png" alt="imagem_grande8">
            <img id="grande-09"
                 srcset="imagens/portraits/fotos_grandes/Sara3_900.png 900w,
                         imagens/portraits/fotos_grandes/Sara3_600.png 600w,
                         imagens/portraits/fotos_grandes/Sara3_224.png 224w"
                 sizes="(min-width: 1440px) 900px,
                                (min-width: 768px) 600px,
                                 224px"
                 src="imagens/portraits/fotos_grandes/Sara3_224.png" alt="imagem_grande9">
            <span class="close">&times;</span>
        </div>
    </article>
</main>
<script src="javaScript/js.js"></script>
<script src="javaScript/hamburguer.js"></script>
</body>
</html>

最佳答案 

function clicar() {
  var botao = document.querySelector("span").click();
}
if(clicar) {
  modal.style.display = "none";
}

在上面的代码中，您手动调用了 click 事件。相反，添加 click 监听器。同样，在 if 语句中传递函数名称将始终计算为真值。

解决方法:

为文档添加click 监听器，检查被点击的元素是否为.close，如果是则隐藏modal 否则什么都不做。 

var imagens = document.getElementsByClassName("imagens");
for (var i = 0; i < imagens.length; i++) {
  imagens[i].addEventListener("click", function() {
    var splitedId = this.id.split("-");
    var IddivGrande = "grande-" + splitedId[1];
    var imagemGrande = document.getElementById(IddivGrande);
    var modal = document.getElementById("modal");
    modal.style.display = "block";
    imagemGrande.style.display = "block";
  });
}

document.addEventListener('click', function(e) {
  if (!e.target.matches('.close')) return;
  document.querySelector('#modal').style.display = "none";
});
body{
    margin:0;
    font-family: "Helvetica", serif;
}
/*main*/
article{
    display: block;
    position: relative;
    width: 70%;
    left: 50%;
    transform: translateX(-50%);
    margin-top:10%;
    margin-bottom: 10%;
}
h3{
    display: block;
    position: relative;
    top:0;
    font-size: 15px;
    width: 200px;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 50px;
}
body>main>article>img{
    display: block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top:10%;
}
#grande-01 {
    display: none;
    position: relative;
    top:4%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-02 {
    display: none;
    position: relative;
    top:15%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-03 {
    display: none;
    position: relative;
    top:20%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-04 {
    display: none;
    position: relative;
    top:30%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-05 {
    display: none;
    position: relative;
    top:40%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-06 {
    display: none;
    position: relative;
    top:50%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-07 {
    display: none;
    position: relative;
    top:65%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-08 {
    display: none;
    position: relative;
    top:75%;
    left: 50%;
    transform: translateX(-50%);
}
#grande-09 {
    display: none;
    position: relative;
    top:85%;
    left: 50%;
    transform: translateX(-50%);
}
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* The Close Button */
.close {
    display: block;
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/*tablet---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 768px){
    article{
        width: 80%;
    }
    h3{
        font-size: 23px;
        left: 0;
        transform: none;
        margin-left: 1%;
    }
    body>main>article>img{
        display: inline-block;
        left: 0;
        transform: none;
        margin: 0 1%;
        margin-bottom: 5%;
    }
    #grande-01, #grande-02, #grande-03, #grande-04, #grande-05, #grande-06, #grande-07, #grande-08, #grande-09{
        top:50%;
        transform: translateY(-50%) translateX(-50%);
    }
}
/*laptop----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1024px){
    article{
        width: 90%;
    }
    h3{
        font-size: 25px;
        width: 350px;
    }
}
/*laptopL----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (min-width: 1440px){
    h3{
        font-size: 30px;
        width: 400px;
    }
}
<article>
  <h3>Portraits</h3>
  <img class="imagens" id="pequeno-01" srcset="https://placeimg.com/640/480/nature,https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" sizes="(min-width: 1440px) 400px,
                            (min-width: 1024px) 350px,
                             200px" src="imagens/portraits/fotos_quadradas/Ines1_200.png" alt="Ines1">

  <img class="imagens" id="pequeno-09" srcset="https://placeimg.com/640/480/nature, https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg" sizes="(min-width: 1440px) 400px,
                            (min-width: 1024px) 350px,
                             200px" src="https://placeimg.com/640/480/nature" alt="Sara3">

  <div class="modal" id="modal">
    <img id="grande-01" srcset="https://placeimg.com/640/480/nature 900w,
             https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg 600w" sizes="(min-width: 1440px) 900px,
                            (min-width: 768px) 600px,
                             224px" src="https://placeimg.com/640/480/nature" alt="imagem_grande1">
    <span class="close">&times;</span>
    <img id="grande-09" srcset="https://placeimg.com/640/480/nature 900w,
             https://upload.wikimedia.org/wikipedia/commons/f/f9/Phoenicopterus_ruber_in_S%C3%A3o_Paulo_Zoo.jpg 600w" sizes="(min-width: 1440px) 900px,
                            (min-width: 768px) 600px,
                             224px" src="https://placeimg.com/640/480/nature" alt="imagem_grande1">
    <span class="close">&times;</span>
  </div>

</article>

-----编辑---

不是将所有图像都放在 modal 部分，而是在 modal 中只添加一个 img 标签，并将其 src 更改为点击 img. 

const modal = document.getElementById('modal');

document.querySelectorAll('article > img').forEach(img => {
  img.addEventListener('click', function() {
    modal.querySelector('img').src = this.src;
    modal.style.display = "flex";
    modal.style.justifyContent = "center";
  });
});

document.addEventListener('click', function(e) {
  if (!e.target.matches('.close')) return;
  modal.style.display = "none";
});
body {
  margin: 0;
  font-family: "Helvetica", serif;
}


/*main*/

article {
  display: block;
  position: relative;
  width: 70%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 10%;
  margin-bottom: 10%;
}

h3 {
  display: block;
  position: relative;
  top: 0;
  font-size: 15px;
  width: 200px;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 50px;
}


/* The Modal (background) */

.modal {
  display: none;
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgba(0, 0, 0, 0.9);
  /* Black w/ opacity */
}


/* The Close Button */

.close {
  display: block;
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

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


/*tablet---------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 768px) {
  article {
    width: 80%;
  }
  h3 {
    font-size: 23px;
    left: 0;
    transform: none;
    margin-left: 1%;
  }
  body>main>article>img {
    display: inline-block;
    left: 0;
    transform: none;
    margin: 0 1%;
    margin-bottom: 5%;
  }
  #grande-01,
  #grande-02,
  #grande-03,
  #grande-04,
  #grande-05,
  #grande-06,
  #grande-07,
  #grande-08,
  #grande-09 {
    top: 50%;
    transform: translateY(-50%) translateX(-50%);
  }
}


/*laptop----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 1024px) {
  article {
    width: 90%;
  }
  h3 {
    font-size: 25px;
    width: 350px;
  }
}


/*laptopL----------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width: 1440px) {
  h3 {
    font-size: 30px;
    width: 400px;
  }
}

article>img {
  height: 400px;
  width: 400px;
}
<article>
  <h3>Portraits</h3>
  <img class="imagens" id="pequeno-01" src="https://interactive-examples.mdn.mozilla.net/media/examples/grapefruit-slice-332-332.jpg" alt="Ines1">

  <img class="imagens" id="pequeno-09" src="https://placeimg.com/640/480/nature" alt="Sara3">

  <div class="modal" id="modal">
    <img src="" alt="">
    <span class="close">&times;</span>
  </div>
</article>

关于javascript - 如何关闭覆盖屏幕的div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59457379/

上一篇：javascript - window.onbeforeunload 不正确地允许导航

下一篇：javascript - 我们如何更新 firebase 云存储中的现有图像？

相关文章：

javascript - 在何处添加事件监听器的最佳实践

javascript - 在 knockout 中从 JSON 对象创建 ko.observableArray

javascript - blueimp Gallery JS 初始化问题

gallery - Orchard 上的 Orchard 画廊 1.6

javascript - 使用 Google map 或其他 map API 在 map 上绘制两点之间路线的百分比

javascript - Node js 路由器不处理删除

javascript - Hello World 不能在带有 jointjs 的 html 中正常工作？

html - 所有版本的所有浏览器都可以识别这些样式吗？

javascript - 如何处理单个 HTML 页面中的表单

javascript - 最大高度/最大宽度在 Firefox 和 IE 中不起作用

©2024 IT工具网  联系我们