WebUploader在display:none 无法运行

Posted 2020-09-24 miny_simp

webuploader.js  多文件上传插件

当为其所在div设置display:none 时，WebUploader的按钮打不开，无法运行

解决办法：浏览器加载的时候，设置WebUploader所在的div显示，然后再为起设置隐藏属性

.tab-content > .tab-pane {
    display: block; position: absolute; opacity: 0; filter:Alpha(opacity=0);
}
.tab-content > .active {
    position: relative; opacity: 1; filter:Alpha(opacity=1);
}


延伸：
CSS元素隐藏 
    在CSS中，让元素隐藏（指屏幕范围内肉眼不可见）的方法很多，有的占据空间，有的不占据空间；有的可以响应点击，有的不能响应点击。
{ 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); /* 不占据空间，可以点击 */ } 
/********************************************************************************/ 
{ 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* IE6/IE7/IE9不占据空间，IE8/FireFox/Chrome/Opera占据空间。都无法点击 */ 
} 
/********************************************************************************/ 
{ 
position: absolute; 
zoom: 0.001; 
-moz-transform: scale(0); 
-webkit-transform: scale(0); 
-o-transform: scale(0); 
transform: scale(0); 
/* 不占据空间，无法点击 */ 
}