display:none引起的血案

背景：

此处须要开发一个马甲号的添加功能，其中涉及到了图片的上传，webuploader.js上传图片 页面加载时弹框是隐藏着的，但点击加号按钮时才弹出弹框

问题：

点击“选择图片”不生效了，文件选择框一直弹不出来

 

弯路：

1.怀疑是该插件自己有问题，弃坑，打算用H5的方法<input type="file">本身写一个。......后台的接口也须要修改，而现有的代码中还有不少是用该插件实现的上传。行不通.......

思考好久，可能缘由：

webuploader，封装了一个input，type=‘file’，浏览文件按钮实现原理是一个透明的层，点击这个层会触发点击事件。因为个人隐藏和展现是试用的display:none,而该方法会致使点击不响应。（在WebUploader初始化的时候，该方法缘由致使它动态获取的元素大小有问题）

解决方法：

1.用z-index=-99来隐藏，z-index=99展现（不够优雅）

2.直接在样式中修改，把动态元素的大小恢复正常（较好）

#filePicker div:nth-child(1){
    left: 0;
}
#filePicker div:nth-child(2){
    width: 100% !important;
    height: 100% !important;
}

 

总结：

{ 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