类似模态框,当然用其他插件可能更方便

引入jQuery,然后给所有要实现点击弹出放大效果的图片添加一个类名为imglist

然后在js中使用如下代码:

$(".imglist").click(function() {
  var modal = $("<div></div>").css({
    "position": "fixed",
    "top": "0",
    "left": "0",
    "width": "100%",
    "height": "100%",
    "background-color": "rgba(0,0,0,0.5)",
    "display": "flex",
    "justify-content": "center",
  "align-items": "center"
  
  });
  $("body").append(modal);  var modalImg = $("<img>").attr("src", this.src).css({
    "display": "block",
    "margin": "auto",
    "max-width": "80%",
    "max-height": "80%"
  });
  modal.append(modalImg);  modal.click(function() {
    $(this).remove();
  });
});
End
最后修改:2023 年 06 月 20 日
如果觉得我的文章不错,请随手点赞~