1. 程式人生 > >display:none引發的血案

display:none引發的血案

背景:

此處需要開發一個馬甲號的新增功能,其中涉及到了圖片的上傳,webuploader.js上傳圖片 頁面載入時彈框是隱藏著的,但點選加號按鈕時才彈出彈框

問題:

點選“選擇圖片”不生效了,檔案選擇框一直彈不出來

 

彎路:

1.懷疑是該外掛本身有問題,棄坑,打算用H5的方法<input type="file">自己寫一個。......後臺的介面也需要修改,而現有的程式碼中還有很多是用該外掛實現的上傳。行不通.......

思考很久,可能原因:

webuploader,封裝了一個input,type=‘file’,瀏覽檔案按鈕實現原理是一個透明的層,點選這個層會觸發點選事件。由於我的隱藏和展示是試用的display:none,而該方法會導致點選不響應。(在WebUploader初始化的時候,該方法原因導致它動態獲取的元素大小有問題)

解決方法:

用z-index=-99來隱藏,z-index=99展示

總結:

{ display: none; /* 不佔據空間,無法點選 */ } 

/********************************************************************************/ 

{ visibility: hidden; /* 佔據空間,無法點選 */ } 

/********************************************************************************/ 

{ position: absolute; top: -999em; /* 不佔據空間,無法點選 */ } 

/********************************************************************************/ 

{ position: relative; top: -999em; /* 佔據空間,無法點選 */ } 

/********************************************************************************/ 

{ position: absolute; visibility: hidden; /* 不佔據空間,無法點選 */ } 

/********************************************************************************/ 

{ height: 0; overflow: hidden; /* 不佔據空間,無法點選 */ } 

/********************************************************************************/ 

{ opacity: 0; filter:Alpha(opacity=0); /* 佔據空間,可以點選 */ } 

/********************************************************************************/ 

{ position: absolute; opacity: 0; filter:Alpha(opacity=0); /* 不佔據空間,可以點選 */ } 

 

該外掛的官網:

http://fex.baidu.com/webuploader/doc/index.html