【layer.open】弹出层没能居屏幕中间 【解决方法】

分享 未结
1 245
浅翔灬
浅翔灬 2017-10-12
悬赏:20飞吻
最近在做项目遇到了【layer.open】弹出层没能居屏幕中间的问题,
css样式冲突是造成不能居中的原因之一,我参与的项目是大牛开发的经典“厂”字形结构的后台管理框架页面,css样式冲突了。。
来论坛搜答案看到了一些大侠遇到同样的问题,有的提问也是几年前的事了emmm...
但项目的需求是刚需,所以还是各种百度找到了合适的解决方法,这里分享一下,希望也能帮到有需要的大侠们。。
解决方法:
(这里我需要做的是在子窗口用layer.open()点击看大图,其他div道理一样)
① 在.layer.open()前面加上parent.
   parent.layer.open({....});
②将layer.open 改为iframe类型,可以避免样式冲突
 layer.open({  type: 2});
缺点:需要自己设置大小,如果图片宽高不一的话无法解决问题(多图的话用layer.photos());


③获取浏览器页面可视区域、所需弹出对象的Height和Width,重新计算并居中。
   	var index = layer.open({
type: 1,
title: false,
closeBtn:2,
shadeClose: true,
content: "<img src='${pageContext.request.contextPath}"+path+"'>"
});

var img_url = '${pageContext.request.contextPath}'+path;
var img = new Image();
img.src = img_url;

img.onload = function(){
var Height=document.documentElement.clientHeight;//取得浏览器页面可视区域的宽度
var Width=document.documentElement.clientWidth;//取得浏览器页面可视区域的宽度
var newH= (Height - img.height)/2+"px";
var newW= (Width - img.width)/2+"px";
layer.style(index, {
left: newW,
top: newH
});
};
回帖
  • 直接在定义的时候定义好能少写很多代码
    var layer = parent.layer === undefined ? layui.layer : parent.layer,
    1 回复