【轉載】解決KindEditor圖片上傳對話框位置異常問題（瀏覽器放大縮小時對話框不見了）

今早在整理文件上傳模塊的時候，發現富文本編輯器 kindeditor 上傳圖片的對話框沒法顯示，其實對話框已經生成了，可是它沒有top值，因此在頁面上看不見。

搗鼓了一個多小時，代碼看了一大串，沒解決！百度了一下，發現下面這篇文章，徹底正解！ 

轉載自 https://blog.csdn.net/kinginblue/article/details/45398267

問題：使用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）獲取和設置元素位置的操做

 1 //純JS
 2 document.getElementById("child").style.left="800px";
 3 document.getElementById("child").style.top="200px";
 4  
 5 //offset()獲取當前元素基於瀏覽的位置  
 6 var offsettop=$("#unamespan").offset().top;   
 7 var offsetleft=$("#unamespan").offset().left;  
 8  
 9 //position()獲取當前元素基於父容器的位置             
10 var positiontop=$("#unamespan").position().top;  
11 var positionleft=$("#unamespan").position().left;  
12  
13 //設置panel2的位置基於unamespan的座標  
14  $("#panel2").css({position: "absolute",'top':offsettop+100,'left':offsetleft+50,'z-index':2});