天天看點

解決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官方文檔:

解決KindEditor圖檔上傳對話框位置異常問題(浏覽器放大縮小時對話框不見了)

這裡要注意,一定要在回調函數體裡擷取和設定對話框位置。 因為是異步加載,其他位置擷取或設定可能擷取不到該對話框Dom

//擷取浏覽器視窗内外高度

<pre name="code" class="javascript">var inHeight = window.innerHeight;
var inWidth = window.innerWidth;
var outHeight = window.outerHeight;
var outWidth = window.outerWidth;
           
解決KindEditor圖檔上傳對話框位置異常問題(浏覽器放大縮小時對話框不見了)

順便學習一下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});