JS/jQuery 点击图片弹出显示内容 - 使用 Layer 弹出层 - 常规

<!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%。