layer实现弹出层自动调节位置
2019-09-05 10:29
846 查看
项目中有弹出层的内容是不固定的,根据情况可能变长变短,于是就要求做layer弹出层的大小自适应,查询了api后发现
layer.iframeAuto方法可以实现,这里吐槽一点,ie浏览器的html没有被body撑大,而iframeAuto方法是根据html的高度计算的,导致我之前出现在ie下,调用iframeAuto后高度直接变零。
好了,做好了这一点之后,测试又提出一个问题,因为他是用小屏幕测试的,上面的位置没有变,弹出层变长以后按钮就被挤到下面去了。所以我需要做一个效果,在弹出层长度改变后重新居中。
这时我就在网上开始找资料了,发现layer.style可以实现这个效果,但是很麻烦需要计算然后赋值。
正当我决定用这个方案时,结果我在chrome控制台测试layer.style时发现一个意外的效果。当我移动控制台边界改变大小时,弹出层自动居中了。
移动前
移动后
实际上是触发了父层的$(window).resize()。
然后我开始向这个方法实验,但是不管是$(top.window).resize(),$(window.top).resize(),top.$(window).resize(),$(top).resize()都不能触发top层的$(window).resize()方法。
最后还是没有成功,我只好重新使用layer.style来计算了
var index = top.layer.getFrameIndex(window.name);//获得layer弹出层索引 top.layer.iframeAuto(index, 30);//layer弹出层自适应,改造的代码,源代码加上自己加的高度 var topHeight = ($(top.window).height() - $(window).height())/2;//计算高度 top.layer.style(index,{top:topHeight+"px"});//设置弹出层位置
中规中矩解决这个问题,不过还是不知道在弹出层是否能够调用父页面的$(window).resize()
完!
以上这篇layer实现弹出层自动调节位置就是小编分享给大家的全部内容了,希望能给大家一个参考
您可能感兴趣的文章:
相关文章推荐
- jquery实现可自动判断位置的弹出层效果代码
- jquery实现可自动判断位置的弹出层效果代码
- (素材源码)猫猫学IOS(十八)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复
- JQuery实现页面刷新滚动条自动滚动到特定位置
- 带尖角的PopupWindow(可以自动调节小尖角的位置)
- ASP实现自动弹出窗口
- 请帮助程序中加入弹出列表,实现选择自动填入
- Android绑定EditText自动弹出自定义软键盘不同按键设置不同背景的实现(自动向上顶适应布局)
- 使用JAVASCRIPT实现弹出框,过一段时间自动消失
- jQuery、layer实现弹出层的打开、关闭
- 关于利用AlertDialog实现底部弹出菜单的位置问题
- JS获取div滚动条距离实现弹出标签位置动态移动
- (素材源码)猫猫学IOS(十八)UI之QQ聊天布局_键盘通知实现自动弹出隐藏_自动回复
- QBoxLayout::setSizeConstraint可以固定窗口的大小,且根据内部控件所占用的位置自动调节大小
- ios实现自动获取label高度、宽度及最后一个位置详解
- javascript轻松实现当鼠标移开时已弹出子菜单自动消失
- layer实现关闭弹出层刷新父界面功能详解
- jQuery、layer实现弹出层的打开、关闭
- WPF实现TextBox输入文字后自动弹出数据(类似百度的输入框)
- 到达时间自动点击按钮弹出提示并跳转【JavaScript实现】