wp插件中的模态图像

Question

我正在使用插件“ninja tables pro”来显示一个长表。 当我使用谷歌表格导入功能时，我不能使用“灯箱”选项。 所以我尝试用 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>

（带“{{rowphotoduproduit}}”的img是表中图片的src）

这里的问题是，每次我点击一张图片时，它都会显示它，但与上一张一样。

你有什么想法吗？

提前谢谢你

Answer 1

您可以使用 jquery 中的empty 方法在附加图像之前“清空”弹出窗口。

所做的其他更改：

• 为div overlay和div popup添加结束</div>标签

• 删除img上的重复类属性

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

• 将 style.display 的使用更改为 jquery hide/show 方法

• 使用template strings 而不是连接新的 图片元素

更新：添加了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>