layer.open打开图片

以下是使用layer.open打开图片的示例代码：

// 单个图片
function showImg(url) {
  layer.open({
    type: 1,
    closeBtn: 1,
    shade: 0.8,
    area: ['600px', '400px'],
    title: false,
    content: '<img src="' + url + '">'
  });
}

// 多个图片
var imgList = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var imghtml = '';
for (var i in imgList) {
  var img = imgList[i];
  imghtml += '<img src="' + img + '">';
}

layer.open({
  type: 1,
  area: ['600px', '400px'],
  title: false,
  shade: 0.8,
  moveType: 1,
  shift: 0,
  content: imghtml
});

相关问题

layer.open 二维码

layer.open 可以用来在网页上弹出一个弹窗，常用于显示一些信息或者表单。如果你想要在弹窗中显示一个二维码，可以按照以下步骤进行操作：

1. 首先，你需要引入 `layer.js` 文件。你可以在 `https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.js` 下载或使用其他方式引入。

2. 在你的 HTML 页面中，创建一个按钮或者其他触发弹窗的元素。

<button id="popupBtn">点击弹出二维码</button>

3. 在 JavaScript 中，使用 `layer.open` 打开弹窗，并在其中插入二维码图片。

// 当点击按钮时触发弹窗
document.getElementById('popupBtn').onclick = function() {
  layer.open({
    type: 1,
    title: false, // 不显示标题栏
    closeBtn: 1, // 显示关闭按钮
    shadeClose: true, // 点击遮罩层关闭弹窗
    area: ['300px', '300px'], // 设置弹窗宽度和高度
    content: '<img src="path/to/your/qrcode.png" />' // 插入二维码图片的路径
  });
};

注意替换 `path/to/your/qrcode.png` 为你实际的二维码图片路径。

通过以上步骤，当点击按钮时，就会弹出一个带有二维码的弹窗。你可以根据实际需求调整弹窗的样式和内容。

layer.open({ type: 2, title: ['图片选择器','background-color:#409EFF; font-size:16px;color:#ffffff;border-radius:10px 10px 0 0;'], shadeClose: true, id: 'choose-img-layer', area: ['800px', '600px'], content:['{:url("schoolAppFiles/upLoadFiles/upLoadFilesImgView")}','height:100%;'], success: function(layero, index){ localStorage.setItem('imgLinks', ''); window.addEventListener('storage', function(event) { if (event.key === 'imgLinks') { var data = JSON.parse(event.newValue); console.log('localStorage.getItem("imgLinks")变化了，新值为：',data ); layer.close('choose-img-layer'); } }); }, });纠正这段代码会重复输出的bug

这段代码在打开弹窗时注册了一个 `window.addEventListener` 监听 `localStorage` 的变化，但是每次打开弹窗时都会注册一个新的监听器，导致出现重复输出的问题。为了解决这个问题，可以在关闭弹窗的时候移除该监听器。

修改后的代码如下：

var chooseImgLayerIndex = layer.open({
    type: 2,
    title: ['图片选择器', 'background-color:#409EFF; font-size:16px;color:#ffffff;border-radius:10px 10px 0 0;'],
    shadeClose: true,
    id: 'choose-img-layer',
    area: ['800px', '600px'],
    content: ['{:url("schoolAppFiles/upLoadFiles/upLoadFilesImgView")}', 'height:100%;'],
    success: function(layero, index) {
        localStorage.setItem('imgLinks', '');
        window.addEventListener('storage', onStorageEvent);
    },
    end: function() {
        window.removeEventListener('storage', onStorageEvent);
    }
});

function onStorageEvent(event) {
    if (event.key === 'imgLinks') {
        var data = JSON.parse(event.newValue);
        console.log('localStorage.getItem("imgLinks")变化了，新值为：', data);
        layer.close(chooseImgLayerIndex); // 关闭弹窗
    }
}

在这个修改后的代码中，我们首先定义了一个变量 `chooseImgLayerIndex` 来存储打开弹窗时返回的索引，然后在打开弹窗时注册监听器，并在关闭弹窗时移除监听器。同时，我们把监听器的处理函数 `onStorageEvent` 定义为独立的函数，以方便移除监听器时使用。在处理函数中，我们通过 `chooseImgLayerIndex` 关闭弹窗。这样就可以避免重复输出的问题了。