您可以使用以下代码实现点击图片弹出显示的功能:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdn.staticfile.org/layer/2.3/skin/layer.css">
  <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/layer/2.3/layer.js"></script>
</head>
<body>
  <img src="image.jpg" alt="图片" id="image">
  
  <script>
    $(document).ready(function() {
      $("#image").click(function() {
        var imageUrl = $(this).attr("src");
        layer.open({
          type: 1,
          title: false,
          closeBtn: 1,
          area: ['auto', 'auto'],
          skin: 'layui-layer-nobg', //没有背景色
          shadeClose: true,
          content: '<img src="' + imageUrl + '" style="max-width: 100%;">'
        });
      });
    });
  </script>
</body>
</html>

这段代码首先引入了jQuery和layer的库文件。然后,在页面中添加一个图片元素,并给其设置一个id为image。接着,使用jQuery绑定了click事件,当点击图片时触发回调函数。在回调函数中,获取被点击图片的src属性值,然后调用layer.open()方法打开一个弹出层,其中content参数的值是一个包含图片标签的字符串,通过拼接imageUrl来动态设置图片的路径。最后,通过CSS样式设置弹出层图片的最大宽度为100%

jsjquery 点击图片 用layeropen弹出显示

原文地址: https://www.cveoy.top/t/topic/hRKZ 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录