问题描述
即使我在模态上有不同的类,我也很难在模态中得到相同的图像...我确定这是我的JS代码,只是无法弄清楚....任何帮助都很大赞赏。
我仍在学习JS,但要知道足够危险!我确信这不是最好的编码方式,但是我从W3schools那里获取了基础知识,并根据自己的需要进行了调整。
起初只有一个模式可以使用,但是我想出了使代码更详细的方法,现在我得到了相同的图片。
我如何确保它选择正确的一个?
这是我的代码:
// Get the modal
var modal = document.getElementById("myModal");
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button,open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x),close the modal
span.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";
}
}
// Get the modal
var modal2 = document.getElementById("myModal2");
// Get the button that opens the modal
var btn = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];
// When the user clicks the button,close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
<button id="myBtn">1</button> <!-- The Modal -->
<div id="myModal" class="modal"><!-- Modal content -->
<div class="modal-content">
<img class="img" src="https://bbk12e1-cdn.myschoolcdn.com/ftpimages/772/misc/misc_190683.123dx" />
<span class="close">×</span>
<div>This is the Galbraith Building</div>
</div>
</div>
<button id="myBtn2">2</button> <!-- The Modal -->
<div id="myModal2" class="modal2"><!-- Modal content -->
<div class="modal-content2">
<img class="img2" src="https://bbk12e1-cdn.myschoolcdn.com/772/photo/2015/06/orig_photo275070_2980857.jpg" />
<span class="close2">×</span>
<div>This is the Galbraith Building</div>
</div>
解决方法
您正在为这两个函数调用第一个模态。将第二组更改为modal2.style.display,它应该可以解决您的问题
def foo():
global x
x = 100
,
尽管@Halmon解决了您的特定问题,但我认为您不应该重复完整的代码行来完成相同的事情。
通用演示可以是这样的(我在里面放了笔记):
// this is your modal
let modalCon = document.querySelector('#myModal');
// this is an array of images src. it may be helpful if you have more then 2 images.
let chosen = [
'https://bbk12e1-cdn.myschoolcdn.com/772/photo/2015/06/orig_photo275070_2980857.jpg','https://bbk12e1-cdn.myschoolcdn.com/ftpimages/772/misc/misc_190683.123dx'
];
// since the number of buttons that will trigger the modal
// is the same as the array indexes you can simply:
// a. add event listener when a button clicked
document.querySelectorAll('#modalTrig button').forEach((btn,i) => btn.addEventListener('click',()=> {
// b. set the src of modal's image
document.querySelector('#myModal img').setAttribute('src',chosen[i]);
// c. show the modal
modalCon.classList.add('show');
}));
// this will close the modal
document.querySelector('#close').addEventListener('click',() => { modalCon.classList.remove('show'); });
/* just for demo */
#myModal {
width: 85%;
max-width: 600px;
margin: auto;
opacity: 0;
transition: 1s ease-in-out;
}
#myModal img {max-width: 100%; height: auto;}
#myModal.show { opacity: 1;}
<nav id="modalTrig">
<button>1</button>
<button>2</button>
</nav>
<aside id="myModal" class="modal"><!-- Modal content -->
<button id="close">×</button>
<figure class="modal-content">
<img id="img" />
<figcaption>This is the Galbraith Building</figcaption>
</figure>
</aside>
PS-尽管从示例中学习可以更快,但是您应该先学习基础知识。开始here。