Javascript 在模式弹出窗口中插入图像
我正在制作一个带有模型弹出窗口的图像库,JavaScript代码正在运行,但只使用库弹出模式框的第一个图像。如何使用每个图像弹出模式? 非常感谢您的帮助,谢谢Javascript 在模式弹出窗口中插入图像,javascript,Javascript,我正在制作一个带有模型弹出窗口的图像库,JavaScript代码正在运行,但只使用库弹出模式框的第一个图像。如何使用每个图像弹出模式? 非常感谢您的帮助,谢谢 <!-- The Modal --> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id="myImg1"> <
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="myImg1">
<div id="caption"></div>
</div>
<?php echo '<img id="myImg" src="'.esc_url( $info['0'] ).'" alt="Snow" style="width:100%;max-width:300px">'; ?>
<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 img = document.getElementById('myImg');
var modalImg = document.getElementById("myImg1");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
}
// 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>
&时代;
'; ?>
//获取模态
var modal=document.getElementById('myModal');
//获取图像并将其插入模式-使用其“alt”文本作为标题
var img=document.getElementById('myImg');
var modalImg=document.getElementById(“myImg1”);
img.onclick=函数(){
modal.style.display=“块”;
modalImg.src=this.src;
}
//获取关闭模态的元素
var span=document.getElementsByClassName(“关闭”)[0];
//当用户单击(x)时,关闭模式对话框
span.onclick=function(){
modal.style.display=“无”;
}
问题可能是您的所有图像都具有相同的id myImg。
var-img=document.getElementById('myImg')代码>始终选择第一个具有给定id的元素。您可以尝试将js放入函数中并调用onclick
function imgPopup(){
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("myImg1");
modal.style.display = "block";
modalImg.src = this.src;
}
<?php echo '<img id="myImg" src="'.esc_url( $info['0'] ).'" onclick="imgPopup();" alt="Snow" style="width:100%;max-width:300px">'; ?>
函数imgPopup(){
var modal=document.getElementById('myModal');
var modalImg=document.getElementById(“myImg1”);
modal.style.display=“块”;
modalImg.src=this.src;
}
执行以下更新:将新图像包装到容器中。将事件侦听器添加到容器中,匹配所需的标记(img),然后更新模态中的src元素并显示它:
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="myImg1">
<div id="caption"></div>
</div>
<div id="gallery">
<?php echo '<img src="'.esc_url( $info['0'] ).'" alt="Snow" style="width:100%;max-width:300px">'; ?>
</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 gallery = document.getElementById('gallery'),
modalImg = document.getElementById("myImg1");
gallery.addEventListener('click', function(e){
if(e.target.nodeName.toLowerCase() === 'img'){
modalImg.src = e.target.src;
modal.style.display = "block";
}
});
// 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>
&时代;
'; ?>
//获取模态
var modal=document.getElementById('myModal');
//获取图像并将其插入模式-使用其“alt”文本作为标题
var gallery=document.getElementById('gallery'),
modalImg=document.getElementById(“myImg1”);
gallery.addEventListener('click',函数(e){
if(e.target.nodeName.toLowerCase()='img'){
modalImg.src=e.target.src;
modal.style.display=“块”;
}
});
//获取关闭模态的元素
var span=document.getElementsByClassName(“关闭”)[0];
//当用户单击(x)时,关闭模式对话框
span.onclick=function(){
modal.style.display=“无”;
}
请试试这个。为get defined src添加此行
var myImg= document.getElementById("myImg");
替换JavaScript
function imgPopup(){
var modal = document.getElementById('myModal');
var modalImg = document.getElementById("myImg1");
var myImg= document.getElementById("myImg");
modal.style.display = "block";
modalImg.src = myImg.src;
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
}
我假设您的所有标记都有idmyImg
,这是一个冲突,因为许多不同的元素使用相同的id,而getElementById
仅附加到第一个出现的标记。你也可以重构很多这段代码。。。将ID设置为modal,然后仅通过标记钩住,在容器上设置关闭事件等等…单击时不会发生任何事情。是的,我的错,我更新了答案。我使用了“p”标记而不是“img”SRC=Undefined问题是什么。显示SRC not defined(myimg1)的浏览器我做什么?我如何实现关闭按钮?