本文目录
- 求助layer.open 引用的页面如何居中
- layer框架弹出层
- layer组件layer.open弹出位置无法正常居中
- 如何设置jquery layer弹窗弹层位置
- js弹出层随浏览器大小始终居中的问题
- layer弹出层弹出图片第一次总在右下角，第二次才在页面中间
- layui的日期弹出框怎么设置到顶层位置
求助layer.open 引用的页面如何居中
我昨天用这个插件的时候也有这个问题，弹出内容大了就居不了中。这是组件不完美的地方，他设置了top和left值，而且是固定的。这种弹出层都是绝对定位的 所以没办法用margin：auto 0神马的居中。解决方案主要两种：
1.修改在浏览器里面调试模式，调一下top和left看怎么合适，修改lay.css代码；
2.自己写个弹出层，其实超简单，弹出层原理就是搞一层遮罩（一个div，放在body下，高宽都100%，层级顺序设置高于其它层（除弹出内容层以外），加个滤镜效果让他半透明）和弹出内容层（层级顺序设置为最高）再加个关闭按钮。默认这三个容器隐藏（hide或display：none），点击时显示（show或display：block）；
我是采用的第二种方式，实现简单自由，可以随便修改弹出框的样式和丰富的内容。比如：增加记录弹出表单之类。
layer框架弹出层
API文档里面有：
layer.closeAll(); //疯狂模式，关闭所有层
layer.closeAll(’dialog’); //关闭信息框
layer.closeAll(’page’); //关闭所有页面层
layer.closeAll(’iframe’); //关闭所有的iframe层
layer.closeAll(’loading’); //关闭加载层
layer.closeAll(’tips’); //关闭所有的tips层
layer组件layer.open弹出位置无法正常居中
我昨天用这个插件的时候也有这个问题，弹出内容大了就居不了中。这是组件不完美的地方，他设置了top和left值，而且是固定的。这种弹出层都是绝对定位的 所以没办法用margin：auto 0神马的居中。解决方案主要两种：
1.修改在浏览器里面调试模式，调一下top和left看怎么合适，修改lay.css代码；
2.自己写个弹出层，其实超简单，弹出层原理就是搞一层遮罩（一个div，放在body下，高宽都100%，层级顺序设置高于其它层（除弹出内容层以外），加个滤镜效果让他半透明）和弹出内容层（层级顺序设置为最高）再加个关闭按钮。默认这三个容器隐藏（hide或display：none），点击时显示（show或display：block）；
我是采用的第二种方式，实现简单自由，可以随便修改弹出框的样式和丰富的内容。比如：增加记录弹出表单之类。
如何设置jquery layer弹窗弹层位置
关键语法如下：
layer.open({
type: 1,
content: $(’#id’) //这里content是一个DOM，这个元素要放在body根节点下
});
实例：
《!DOCTYPE HTML》《html》
《head》
《meta charset=“utf-8“》
《meta
js弹出层随浏览器大小始终居中的问题
注意吧《scritp》《/script》部分的代码放到body的最后边，帮你加了个html、head标签，onlcick不要放在方法体内部，因为你只需要绑定点击事件一次就够了，不要重复绑定。document.documentElement.clientHeight不兼容ie，ie要用document.body.clientHeight
《html》
《head》
《style type=“text/css“》
body{ margin:0; padding:0;}
#div1{ position:absolute; width:200px; height:200px; background:#ff0000; display:none; z-index:1000}
#masklayer{
background:#000;
display:none;
filter:alpha(opacity = 50);
opacity:0.5;
top:0;
left:0;
height:100%;
width:100%;
z-index:999;
position:fixed;
_position:absolute;
_left: expression(documentElement.scrollLeft + documentElement.clientWidth - this.offsetWidth);
_top: expression(documentElement.scrollTop + documentElement.clientHeight - this.offsetHeight);
}
《/style》
《/head》
《body》
《div id=“masklayer“》《/div》
《div id=“div1“》《/div》
《input type=“button“ id=“btn“ value=“弹出窗口“/》
《script type=“text/javascript“》
var oDiv = document.getElementById(’div1’);
var oMask = document.getElementById(’masklayer’);
var oBtn = document.getElementById(’btn’);
window.onload = window.onresize= function(){
oDiv.style.top = (document.documentElement.clientHeight - oDiv.clientHeight)/2 + “px“;
oDiv.style.left = (document.documentElement.clientWidth - oDiv.clientWidth)/2 + “px“;
}
oBtn.onclick = function(ev){
oMask.style.display = “block“;
oDiv.style.display = “block“;
var oEvent = ev || window.event;
}
《/script》
《/body》
《html》
layer弹出层弹出图片第一次总在右下角，第二次才在页面中间
由于你弹出的图片是一个网络图片，在layer弹出的时候图片还没加载出来，layer高度为0，图片加载出来之后，图片把layer的高度挤开，所以第一次弹出的图片就偏下了，而第二次弹出图片资源已经加载过，直接读取缓存就行了，所以第二次弹出在中间。
layui的日期弹出框怎么设置到顶层位置
1、给弹出层id及信息，方便获取其宽度和高度
var index = layer.msg(data.info,{id:’reg-id’});
2、根据具体情况计算出弹出层的top和left，用offset设置其位置
layer.msg(index,{content:data.info,offset:[ppt,ppl]});
例子，设置layer弹出层在弹出层（id为pop-reg）的中间（水平垂直居中）位置
var offset = $(’#pop-reg’).offset();
var pt = offset.top;//获取弹出层的top
var pl = offset.left;//获取弹出层的left
var ph = $(’#pop-reg’).height();//获取弹出层的高度
var pw = $(’#pop-reg’).width();//获取弹出层的宽度
var index = layer.msg(data.info,{id:’reg-id’});//给layer弹出层定义id
var pph = Number($(’#reg-id’).height()) + 24;//layer弹出层的高度，layer默认的padding-top:12px;padding-bottom:12px;所以此处加上24
var ppw = Number($(’#reg-id’).width()) + 50;//layer弹出层的宽度，layer默认的padding-left:25px;padding-right:25px;所以此处加上50
var ppt = (pt + ph/2 - pph/2) + ’px’;
var ppl = (pl + pw/2 - ppw/2) + ’px’;
layer.msg(index,{content:data.info,offset:[ppt,ppl]});
