wp插件中的模态图像

Posted 2023-05-09

【中文标题】wp插件中的模态图像

【英文标题】：Modal image in wp plugin

【发布时间】：2021-10-29 21:27:45

【问题描述】：

我正在使用插件“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"    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）

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

你有什么想法吗？

提前谢谢你

【参考方案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"    />
<img class="img" src="https://via.placeholder.com/350"    />
<div class="overlay">

</div>
<div id="popup" class="popup"></div>
<span id="btnClose" class="btnClose">&times;</span>

【讨论】：

@JulienCanet 很高兴我能提供帮助。我还使用克隆的解决方案更新了答案，我认为这比创建新元素更好。

哦，是的！我会在我的网站上更新，会更好，非常感谢！