我试图让这个图片在点击时打开一个模态弹出窗口但是没有触发click事件。我查了几个小时的代码,无法找到JavaScript函数的错误,或者它是否是我不知道的类名。
可能出现什么问题?
这些是代码:
<section class="news">
<div>
<section id="info-noticias">
<h1>teste</h1>
<p>
Data publicação: 02/04/2018
Publicado por: Rafael Heros de Almeida </p>
</section>
<!--<section id="banner-noticia"></section>-->
<section id="conteudo-noticia"><p><img class="myImg" src="http://camaracampina.pr.gov.br/paineldecontrole/images/imgnoticia/3.jpg" alt="" width="675" height="386"></p></section>
<section id="tags"><b>Tags de pesquisa:</b> </section>
</div>
</section>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var imgem = document.getElementsByClassName("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
imgem.onClick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onClick = function() {
modal.style.display = "none";
}
</script>
</section>
CSS:
.myImg {
border - radius: 5 px;
cursor: pointer;
transition: 0.3 s;
}
.myImg: hover { opacity: 0.7; }
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z - index: 30; /* Sit on top */
padding - top: 100 px; /* Location of the box */
left: 0;
top: 0;
width: 100 % ; /* Full width */
height: 100 % ; /* Full height */
overflow: auto; /* Enable scroll if needed */
background - color: rgb(0, 0, 0); /* Fallback color */
background - color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal - content img {
margin: auto;
display: block;
width: 80 % ;
max - width: 700 px;
}
/* Add Animation */
.modal - content {
-webkit - animation - name: zoom; -
webkit - animation - duration: 0.6 s;
animation - name: zoom;
animation - duration: 0.6 s;
}
@ - webkit - keyframes zoom {
from {-webkit - transform: scale(0) }
to {-webkit - transform: scale(1) }
}
@keyframes zoom {
from { transform: scale(0) }
to { transform: scale(1) }
}
/* The Close Button */
.close {
position: absolute;
top: 15 px;
right: 35 px;
color: #f1f1f1;
font - size: 40 px;
font - weight: bold;
transition: 0.3 s;
}
.close: hover,
.close: focus {
color: #bbb;
text - decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and(max - width: 700 px) {
.modal - content {
width: 100 % ;
}
}.
答案 0 :(得分:1)
试试这个:
<section class="news">
<div>
<section id="info-noticias">
<h1>teste</h1>
<p>
Data publicação: 02/04/2018 Publicado por: Rafael Heros de Almeida </p>
</section>
<!--<section id="banner-noticia"></section>-->
<section id="conteudo-noticia">
<img id="myImg" src="http://camaracampina.pr.gov.br/paineldecontrole/images/imgnoticia/3.jpg" alt="Trolltunga, Norway" width="675" height="386">
<section id="tags"><b>Tags de pesquisa:</b> </section>
</section>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var imgem = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
imgem.onclick = function() {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onClick = function() {
console.log("entra");
modal.style.display = "none";
}
</script>
</section>
我的评论:
imgem.onclick (onclick function goes on lower case)
我将getElementByClass
更改为getElementById