模态图像在wp插件

Question

我正在使用插件"ninja tables pro"展示一张长桌子。当我使用google表格输入功能时，我不能使用"灯箱"。选择。所以我尝试用jquery创建一个弹出窗口。

困难的是采取当前点击的图像来显示她，而没有前一个

下面是我的代码:

var btnClose = document.getElementById('btnClose');
btnClose.addEventListener('click',closeModal);
function closeModal() {
overlay.style.display='none';
}
$(document).ready(function() {
$('.img').each(function() {
var currentImage = $(this);

$(this).on("click", function(){
$(".popup").append("<img class='img' src='" + currentImage.attr("src") + "' alt='' width='400' height='400'>");
$("#popup").remove("<img class='img' src='" + currentImage.attr("src") + "' alt='' width='400' height='400'>");
$("#overlay").css("display", "block");
});


});

});

.overlay {
position: fixed;
left: 0px;
top:0px;
background-color: rgba(0,0 ,0 , 0.5);
width: 100%;
height: 100%;
z-index:36;
display:none;
padding: 500px;
}
.popup{
margin-left: auto;
margin-right: auto;
margin-top: -240px !important;
width : 70%;
background-color: rgb(243, 243, 243);
padding: 1em;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.btnClose {
float: right;
font-size:16pt;
cursor: pointer;
color: rgb(26, 26, 26);
}

<img class="img" src="{{row.photoduproduit}}" alt="" width="150" height="150" class="aligncenter size-full wp-image-5505"/>
<div id="overlay" class="overlay">
<div id="popup" class="popup">
<span id="btnClose" class="btnClose">&times;</span>

(图片){{rowphotoduproducit}}&;是在表中有PIC的SRC)

这里的问题是，每次我点击一个图片，它显示它，但与前一个。

你有什么主意吗?

谢谢你提前

Answer 1

你可以在添加图像之前使用jquery的empty方法来'清空'弹出框。

其他改动:

• 为div overlay和div popup添加关闭</div>标签

• 删除img上的重复类属性

• 将closeModal中的overlay改为$('.overlay')

• 将style.display方法改为jqueryhide/show方法

• 使用template strings代替new的串联图像元素

更新:添加了一个clone的解决方案，并注释掉了第一个解决方案

var btnClose = document.getElementById('btnClose');
btnClose.addEventListener('click', closeModal);
function closeModal() {
$("#overlay").hide();
}
$(document).ready(function() {
$('.img').each(function() {
const currentImage = $(this);
currentImage.on("click", function() {
$('.popup').empty();
// creating a new image with same src
// const imageToAdd = `<img class='img' src=${currentImage.attr('src')} alt='' width='400' height='400' />`
// $('.popup').append(imageToAdd)

// clone image and change width/height
const clonedImage = $( currentImage ).clone().appendTo( ".popup" );
clonedImage.css({
'width' : '400px',
'height' : '400px'
});
$("#overlay").show();
});

});
});

.overlay {
position: fixed;
left: 0px;
top: 0px;
background-color: rgba(0, 0, 0, 0.5);
width: 100%;
height: 100%;
z-index: 36;
display: none;
padding: 500px;
}
.popup {
margin-left: auto;
margin-right: auto;

width: 70%;
background-color: rgb(243, 243, 243);
padding: 1em;
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
border-radius: 5px;
}
.btnClose {
font-size: 16pt;
cursor: pointer;
color: rgb(26, 26, 26);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="img" src="https://via.placeholder.com/150" alt="" width="150" height="150" />
<img class="img" src="https://via.placeholder.com/350" alt="" width="150" height="150" />
<div class="overlay">
</div>
<div id="popup" class="popup"></div>
<span id="btnClose" class="btnClose">&times;</span>