layer实现弹出层自动调节位置


Posted in Javascript onSeptember 05, 2019

项目中有弹出层的内容是不固定的,根据情况可能变长变短,于是就要求做layer弹出层的大小自适应,查询了api后发现

layer.iframeAuto方法可以实现,这里吐槽一点,ie浏览器的html没有被body撑大,而iframeAuto方法是根据html的高度计算的,导致我之前出现在ie下,调用iframeAuto后高度直接变零。

好了,做好了这一点之后,测试又提出一个问题,因为他是用小屏幕测试的,上面的位置没有变,弹出层变长以后按钮就被挤到下面去了。所以我需要做一个效果,在弹出层长度改变后重新居中。

这时我就在网上开始找资料了,发现layer.style可以实现这个效果,但是很麻烦需要计算然后赋值。

正当我决定用这个方案时,结果我在chrome控制台测试layer.style时发现一个意外的效果。当我移动控制台边界改变大小时,弹出层自动居中了。

移动前

layer实现弹出层自动调节位置

移动后

layer实现弹出层自动调节位置

实际上是触发了父层的$(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实现弹出层自动调节位置就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用javascript动态调整iframe高度的方法
Mar 06 Javascript
javascript 写类方式之三
Jul 05 Javascript
jquery插件制作 手风琴Panel效果实现
Aug 17 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
yepnope.js使用详解及示例分享
Jun 23 Javascript
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
修改或扩展jQuery原生方法的代码实例
Jan 13 Javascript
JavaScript绑定事件监听函数的通用方法
May 14 Javascript
Vue2.x中的父组件传递数据至子组件的方法
May 01 Javascript
layui 对弹窗 form表单赋值的实现方法
Sep 04 Javascript
vue resource发送请求的几种方式
Sep 30 Javascript
vue使用i18n实现国际化的方法详解
Sep 05 #Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
Sep 05 #Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 #Javascript
React路由鉴权的实现方法
Sep 05 #Javascript
vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)
Sep 05 #Javascript
layer.open的自适应及居中及子页面标题的修改方法
Sep 05 #Javascript
在layui中layer弹出层点击事件无效的解决方法
Sep 05 #Javascript
You might like
火车采集器 免费版使出收费版本功能实现原理
2009/09/17 PHP
php开发过程中关于继承的使用方法分享
2011/06/17 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
PHP实现websocket通信的方法示例
2018/08/28 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
js精准的倒计时函数分享
2016/06/29 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
Bootstrap缩略图的创建方法
2017/03/22 Javascript
Angular实现图片裁剪工具ngImgCrop实践
2017/08/17 Javascript
jquery.rotate.js实现可选抽奖次数和中奖内容的转盘抽奖代码
2017/08/23 jQuery
ng-events类似ionic中Events的angular全局事件
2018/09/05 Javascript
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
用pickle存储Python的原生对象方法
2017/04/28 Python
python语音识别实践之百度语音API
2018/08/30 Python
Python 中导入csv数据的三种方法
2018/11/01 Python
python的xpath获取div标签内html内容,实现innerhtml功能的方法
2019/01/02 Python
Python3 shelve对象持久存储原理详解
2020/03/23 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
斯洛伐克时尚服装网上商店:Cellbes
2016/10/20 全球购物
C#基础面试题
2016/10/17 面试题
银行会计业务的个人自我评价
2013/11/02 职场文书
最新自我评价范文
2013/11/16 职场文书
人事档案接收函
2014/01/12 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
业务员自荐信范文
2014/04/20 职场文书
党支部对照检查材料
2014/08/25 职场文书
国庆节促销广告语2014
2014/09/19 职场文书
python基于tkinter制作下班倒计时工具
2021/04/28 Python
详解CSS伪元素的妙用单标签之美
2021/05/25 HTML / CSS
Python开发简易五子棋小游戏
2022/05/02 Python