解决KindEditor图片上传对话框位置异常问题(浏览器放大缩小时对话框不见了)

问题:使用KindEditor上传图片,当浏览器缩小或者放大的时候,上传对话框会不见了。
原因是当浏览器放大缩小时,窗口的 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}); 




评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值