解决KindEditor图片上传对话框位置异常问题(浏览器放大缩小时对话框不见了)
2015-04-30 19:04
621 查看
问题:使用KindEditor上传图片,当浏览器缩小或者放大的时候,上传对话框会不见了。
原因是当浏览器放大缩小时,窗口的 innerHeight 和 innerWidth 成倍变化。
但是动态加载的对话框的位置的top和left值还是缩放100%状态下的值。
所以解决思路是:当对话框加载完之后,使用 JS+CSS 控制该对话框的位置。
查看KindEditor图片上传对话框 的结构是:
查看KindEditor官方文档:
这里要注意,一定要在回调函数体里获取和设置对话框位置。
因为是异步加载,其他位置获取或设置可能获取不到该对话框Dom
//获取浏览器窗口内外高度
顺便学习一下JS(JQuery)获取和设置元素位置的操作
原因是当浏览器放大缩小时,窗口的 innerHeight 和 innerWidth 成倍变化。
但是动态加载的对话框的位置的top和left值还是缩放100%状态下的值。
所以解决思路是:当对话框加载完之后,使用 JS+CSS 控制该对话框的位置。
查看KindEditor图片上传对话框 的结构是:
<div class="class="ke-dialog-default ke-dialog"> <div class="ke-dialog-content"></div> <div class="ke-dialog-shadow"></div> </div>
查看KindEditor官方文档:
这里要注意,一定要在回调函数体里获取和设置对话框位置。
因为是异步加载,其他位置获取或设置可能获取不到该对话框Dom
//获取浏览器窗口内外高度
<pre name="code" class="javascript">var inHeight = window.innerHeight; var inWidth = window.innerWidth; var outHeight = window.outerHeight; var outWidth = window.outerWidth;
顺便学习一下JS(JQuery)获取和设置元素位置的操作
//纯JS document.getElementById("child").style.left="800px"; document.getElementById("child").style.top="200px"; //offset()获取当前元素基于浏览的位置 var offsettop=$("#unamespan").offset().top; var offsetleft=$("#unamespan").offset().left; //position()获取当前元素基于父容器的位置 var positiontop=$("#unamespan").position().top; var positionleft=$("#unamespan").position().left; //设置panel2的位置基于unamespan的坐标 $("#panel2").css({position: "absolute",'top':offsettop+100,'left':offsetleft+50,'z-index':2});
相关文章推荐
- 商城项目实战22:解决KindEditor上传图片浏览器兼容性问题
- 淘淘商城系列——解决KindEditor上传图片浏览器兼容性问题
- (转) 淘淘商城系列——解决KindEditor上传图片浏览器兼容性问题
- 解决html的图片放大缩小拉伸后变形的问题
- HTML5异步上传图片(支持预览和进度条),使用其他按钮触发file onclick事件,解决某些浏览器无法触发的问题
- 解决kindeditor上传图片时发生“服务器发生故障”的问题
- PHP上传图片在不同浏览器和浏览器模式中的问题及解决 image/jpeg 和 image/pjpeg
- 上传图片保存位置问题 KindEditor…
- Glide配合PhotoView使用时,图片放大缩小时宽高显示出问题解决记录(新更新)
- django 整合 kindeditor ,解决上传图片 csrf 验证问题
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题 (1)
- 解决mxGraph放大/缩小在非IE浏览器下overlay图标位置不变化的问题
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题 (2)
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题
- 异常-----springmvc + ajaxfileupload解决ajax不能异步上传图片的问题。java.lang.ClassCastException: org.apache.catalina.connector.RequestFacade cannot be cast to org.springframework.web.multipart.
- 学习淘淘商城第二十一课(解决KindEditor上传图片不兼容的问题)
- 解决kindeditor与Struts2框架整合时无法上传本地图片的问题
- Kindeditor(jsp)与SSH三大框架整合上传图片出错问题解决方案
- 对于支持上传文件的手机浏览器出现的图片不能预览问题的解决办法
- kindeditor上传图片和kkpager使用及遇到问题解决