0
使用從頭構建的簡單模式。沒有添加任何花式。但我需要傳遞數組中的數據,到目前爲止,我所獲得的唯一一件事就是添加到所有可單擊元素的數組的最後一個成員。請提供建議,確保通過點擊傳遞適當的數據。將數據傳遞給jQuery模式
<div id="skills-mobile">
<!-- popup content -->
<div id="myModal" class="modal">
<img class="close-icon" src="img/close-icon.png" alt="cross or close the window icon">
<article class="modal-content">
</article>
</div>
</div>
而且這是所使用的對象的陣列:
var skills = [
{
"id":"html-5",
"skill":"HTML5",
},
{
"id":"css-3",
"skill":"CSS3"
},
{
"id":"jvscrpt",
"skill":"Javascript"
},
{
"id":"inter-map",
"skill":"Interaction Mapping"
},
{
"id":"wire",
"skill":"Wireframing"
},
{
"id":"docum",
"skill":"Documentation"
},
{
"id":"adobecc",
"skill":"Adobe CC"
}
]
這是jQuery的。現在,當我關閉模式並再次打開它時,它也會一次又一次地輸出值。所以它基本上會一遍又一遍地附加它,我需要修復它,我知道。如果可能的話,請提供指導我做錯的地方。我認爲結構是不正確的。
var skillSlideshow = function() {
for(var i = 0; i <= skills.length; i++) {
$('#skills-mobile').append('<img id="' + skills[i].id + '" class="skill-img" data-toggle="modal" data-id="107" src="' + skills[i].iconurl + '" />');
//MODALS
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var imgbtn = document.getElementById(skills[i].id);
// Get the <span> element that closes the modal
var closebtn = document.getElementsByClassName("close-icon")[0];
// When the user clicks the button, open the modal
imgbtn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
closebtn.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
};
skillSlideshow();
你需要什麼數據,從數組傳遞?整個陣列? –
我需要將單個對象傳入模態。所以我有7個鏈接與該數組創建,然後當我點擊1我需要它來抓住它的相應信息。 –
將點擊圖像的信息傳遞給模態,並在關閉模態時刪除? –