前端之家

  1. 首页
  2. 问答

如何关闭覆盖屏幕的div

• 问答

在我的网站上，我有一个放置照片的页面。现在，我正在尝试创建一个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.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,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,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,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,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,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,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,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,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,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,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,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,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,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,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,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,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>

zhaowei19790715 回答：如何关闭覆盖屏幕的div
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.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,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,224px" src="https://placeimg.com/640/480/nature" alt="imagem_grande1">
    <span class="close">&times;</span>
  </div>

</article>

-----编辑---

与其在modal部分中包含所有图像，不如在img中添加一个modal标签，并用单击的img的src更改它的src。 

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

galleryhtmljavascript
本文链接：https://www.f2er.com/2872057.html

大家都在问