0
在我的HTML中，我有幾篇文章。每篇文章都包含一個圖像，如果單擊其中一個圖像，則會出現一個模式窗口。所以我的問題是，我怎樣才能使模型窗口中的文章顯示圖像？從HTML頁面的模態窗口中顯示圖像
如果你想檢查我的代碼檢查：
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>
我想你問如何設置圖像源的模式是一樣的縮略圖？您需要在文章的點擊事件中獲取圖片的引用，而不是在其外部。 –
@MikeMcCaughan：是的，我正在尋找一種技術，以便縮略圖的圖像與我的模式窗口相同。我希望你能理解這個問題 – KolaCaine