0
In meinem HTML habe ich mehrere Artikel. Jeder Artikel enthält ein Bild, und wenn Sie auf eines klicken, wird ein modales Fenster angezeigt. Meine Frage ist also, wie kann ich das Bild aus dem Artikel im modalen Fenster anzeigen lassen?Anzeige Bild im modalen Fenster von HTML-Seite
Wenn Sie meinen Code Check überprüfen diese:
var article = document.querySelectorAll("article");
var modal = document.querySelector(".modal");
var cross = document.querySelector(".cross");
var contentModal = document.querySelector(".modal .contentModal img");
var image = document.querySelectorAll("article img");
var funcModal = function (value) {
article[value].addEventListener("click", function() {
modal.style.visibility = "visible";
modal.style.opacity = "1";
contentModal.style.src = image;
})
cross.addEventListener("click", function() {
modal.style.visibility = "hidden";
modal.style.opacity = "0";
modal.style.transition = "opacity 1s";
})
}
for(var i = 0; i < article.length; i++) {
funcModal(i);
}/*////////////////////////////////////////////////////////////////////
Commons
////////////////////////////////////////////////////////////////////*/
* {
margin: 0;
padding: 0;
border: 0;
}
*,*:before,*:after {
box-sizing: border-box;
}
body {
font-size: 62.5%;
font-family: 'Alegreya Sans SC', sans-serif;
}
.cf:before,
.cf:after {
content: " "; /* 1 */
display: table; /* 2 */
}
.cf:after {
clear: both;
}
/**
* For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats.
*/
.cf {
*zoom: 1;
}
/*////////////////////////////////////////////////////////////////////
Header
////////////////////////////////////////////////////////////////////*/
header ul {
display: flex;
justify-content: center;
}
header li {
display: inline-flex;
margin-right: 20px;
margin-top: 20px;
}
header a {
color: #34495e;
text-decoration: none;
font-size: 2.5em;
}
header a:hover {
color: #000;
}
/*////////////////////////////////////////////////////////////////////
Section > article
////////////////////////////////////////////////////////////////////*/
article {
height: 200px;
background-color: #eee;
margin-top: 3.5%;
margin-left: 1%;
margin-right: 1%;
cursor: pointer;
border-radius: 5px;
}
article img {
width: 100%;
border-radius: 10px;
}
.col-20 {
float: left;
width: 18%;
}
/*////////////////////////////////////////////////////////////////////
Fênetre modale
////////////////////////////////////////////////////////////////////*/
.modal {
visibility: hidden;
opacity: 0;
transition: opacity 1s;
background-color: rgba(0,0,0,0.3);
margin: auto;
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
.modal i {
position: absolute;
right: 10px;
top: 10px;
font-size: 40px;
color: #34495e;
cursor: pointer;
}
.contentModal {
margin: auto;
width: 50%;
height: 50%;
border-radius: 10px;
background-color: #fff;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
.contentModal img {
width: 100%;
}<section class="cf">
<article class="col-20">
<img src="img-content/france/1.jpg" alt="">
</article>
<article class="col-20">
<img src="img-content/france/1.jpg" alt="">
</article>
<article class="col-20">
<img src="img-content/france/1.jpg" alt="">
</article>
<article class="col-20">
<img src="img-content/france/1.jpg" alt="">
</article>
<article class="col-20">
<img src="img-content/france/1.jpg" alt="">
</article>
<article class="col-20">
<img src="img-content/france/1.jpg" alt="">
</article>
<article class="col-20">
<img src="img-content/france/1.jpg" alt="">
</article>
<article class="col-20">
<img src="img-content/france/1.jpg" alt="">
</article>
<article class="col-20">
<img src="img-content/france/1.jpg" alt="">
</article>
<article class="col-20"></article>
<article class="col-20"></article>
<article class="col-20"></article>
<article class="col-20"></article>
<article class="col-20"></article>
<article class="col-20"></article>
<div class="modal">
<i class="fa fa-times cross"></i>
<div class="contentModal">
<img src="" alt="">
</div>
</div>
</section>
Ich glaube, Sie zu fragen, wie die Quelle des Bildes in der modal eingestellt das gleiche wie die in der Miniatur zu sein? Sie sollten einen Verweis auf das Bild innerhalb des Klickereignisses des Artikels erhalten und nicht außerhalb. –
@MikeMcCaughan: Ja, ich suche nach einer Technik, so dass das Bild meines Thumbnails für mein modales Fenster dasselbe ist. Ich wünsche dir hoffe das Problem zu verstehen – KolaCaine