layui弹出层第一次打开不居中，第二次才居中

原创已于 2022-04-18 09:45:14 修改 · 5.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#layui #弹出层

于 2018-10-31 16:03:41 首次发布

本文介绍如何解决使用layui框架进行图片放大显示时，弹出层首次打开位置偏左的问题。通过在JavaScript中获取图片的真实尺寸并设置弹出层大小，确保弹出窗口始终居中显示。

最近在做一个帮助文档，想做一个点击图片放大的功能，于是使用layui的弹出层，代码如下

/*
打开弹出层
 */
function openLayer(imgUrl) {
    var imgUrl = imgUrl;
    layui.use('layer', function () {
        var layer = layui.layer;

        layer.open({
            type: 1,
            title: false,
            offset: 'auto',
            area: ['auto', 'auto'],
            shadeClose: true,
            content: '<div><img style="max-width: 1450px;max-height: 800px" src="' + imgUrl + '"></div>'
        });
    });
}

但是每次刷新页面后第一次打开弹出层，弹出层总是水平在左

第二次打开时就能居中

解决办法：在js中获取图片的真实大小

function openLayer(imgUrl) {
    var imgUrl = imgUrl;
    getImageWidth(imgUrl,function(w,h){
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 1,
                title:false,
                offset: 'auto',
                area: [w+'px',h+'px'],
                shadeClose:true,
                content: '<div><img style="max-width: 1450px;max-height: 800px" src="'+imgUrl+'"></div>'
            });
        });
    });
}
// 获取图片真实高度
function getImageWidth(url,callback) {
    var img = new Image();
    img.src = url;
    // 如果图片被缓存，则直接返回缓存数据
    if (img.complete) {
        callback(img.width, img.height);
    } else {
        img.onload = function () {
            callback(img.width, img.height);
        }
    }
}