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

最近在做一个帮助文档，想做一个点击图片放大的功能，于是使用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);}}
}

layui弹出层第一次打开不居中，第二次才居中相关推荐

模拟layui弹出层
以前觉得自己手写一个类似layui的弹出层是挺遥远的事,因为完全没有头绪,即便在layui官网知道layui使用的都是C3动画之前试过控制width:0;height:0来做动画,结果惨不忍睹,直到 ...
Layui 弹出层插件
Layui 弹出层插件开发工具与关键技术: Visual Studio 2015 – Layui 作者:廖亚星撰写时间:2019年 6 月4日这段时间在做项目页面的搭建,在页面的操作中,会出现很 ...
layui弹出层html,layui弹出层效果实现代码
本文实例为大家分享了layui弹出层的具体代码,供大家参考,具体内容如下弹出层大部分演示都在layer独立组件的官网,与内置的layer模块,用法是完全一致的特殊例子 Tips:为了更清晰演示, ...
layui弹出层使用方法总结
layui的模态窗口很强大,但是使用的时候要声明很多东西,并且对于窗口之间的参数传递也没有做具体的说明,所以基于layui弹出层的api进行了一些简单的封装,使用起来更加顺手,先上代码 functio ...
layui弹出层：使用icon图标小结
文章目录 layui弹出层:icon图标小结表格示下: 调用代码 · 效果图 · 示下: layui弹出层:icon图标小结 layui的弹框插件layer中,有很多不同场景需要的弹框icon图标, ...
layui弹出层：皮肤扩展（文档解读）
layui弹出层:皮肤扩展(文档解读) layui弹出层:样式自定义官方文档:https://layer.layui.com/ 皮肤扩展 · 官方教程: 官方文档:https://layer.lay ...
layui弹出层：倒计时后自动关闭（含代码、案例）
layui弹出层:倒计时后自动关闭(含代码.案例) 问题描述: 如何设定倒计时? 如何在自动倒计时结束后关闭弹框: 如何自定义"按钮文字"文案: 如何在关闭后,执行函数事件: 如何 ...
layui弹出层之layer.open弹出iframe窗口·
layui弹出层之layer.open弹出iframe窗口· layer.open弹出iframe窗口 [1]该功能为案例,弹出iframe窗口显示上传数据由于layui的弹出层每次执行layer. ...
如何更改layui弹出层样式
首先引入插件: js: <script src="./layui/src/layui.js"></script> 然后设置layui弹出层内容: layer ...

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

layui弹出层第一次打开不居中，第二次才居中相关推荐

最新文章

热门文章