{"action":"created","issue":{"url":"https://api.github.com/repos/fex-team/webuploader/issues/1492","labels_url":"https://api.github.com/repos/fex-team/webuploader/issues/1492/labels{/name}","comments_url":"https://api.github.com/repos/fex-team/webuploader/issues/1492/comments","events_url":"https://api.github.com/repos/fex-team/webuploader/issues/1492/events","html_url":"https://github.com/fex-team/webuploader/issues/1492","id":127895880,"number":1492,"title":"发现使用bootstrap的DIV作为弹出窗口中来作为文件上传时,点击选择图片时获取不到点击触发事件来打开OS选择文件对话框","user":{"login":"hellolingxh","id":16278653,"avatar_url":"https://avatars.githubusercontent.com/u/16278653?v=3","gravatar_id":"","url":"https://api.github.com/users/hellolingxh","html_url":"https://github.com/hellolingxh","followers_url":"https://api.github.com/users/hellolingxh/followers","following_url":"https://api.github.com/users/hellolingxh/following{/other_user}","gists_url":"https://api.github.com/users/hellolingxh/gists{/gist_id}","starred_url":"https://api.github.com/users/hellolingxh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hellolingxh/subscriptions","organizations_url":"https://api.github.com/users/hellolingxh/orgs","repos_url":"https://api.github.com/users/hellolingxh/repos","events_url":"https://api.github.com/users/hellolingxh/events{/privacy}","received_events_url":"https://api.github.com/users/hellolingxh/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":2,"created_at":"2016-01-21T10:43:17Z","updated_at":"2016-01-21T10:55:37Z","closed_at":null,"body":"具体原因是因为bootstrap的弹是出窗口是用DIV来实现的.一开始该DIV是display:none的.点击按扭时将该弹出框进行居中显示.所以这里就会有个问题:  button.offset();该方法获取不到button.offset().left坐标.一直是0;因为DIV如果是display:none的话,根据就不会有坐标.所示点击\"请选择图片\"按扭无任何反应.而在DIV最靠左边是可以点击的(因为left=0)打开OS的文件选择对话框的.\r\n------------------------------------------------------------------------------------------------------------------------------------------\r\nrefresh: function() {\r\n                var shimContainer = this.getRuntime().getContainer(),\r\n                    button = this.options.button,\r\n                     width = button.outerWidth ?\r\n                     button.outerWidth() : button.width(),\r\n                     height = button.outerHeight ?\r\n                    button.outerHeight() : button.height(),\r\n                    pos = button.offset();\r\n                    debugger;\r\n                width && height && shimContainer.css({\r\n                    bottom: 'auto',\r\n                    right: 'auto',\r\n                    width: width + 'px',\r\n                    height:height + 'px'\r\n                }).offset( pos );\r\n            },\r\n--------------------------------------------------------------------------------------------------------------------------------------\r\n\r\n通过浏览器的调试发现:id = rt_rt_1a9hrgustle51qf4dft1prs1d4f1的DIV为真正的打开OS选择文件对话框的焦点.该焦点并未与\"请选择图片\"的按扭重合(因为该DIV的CSS STYLE的left值为0).原因也就是因为这段HTML代码是放在bootstrap的一个DIV为display:none下导致的,导致在计算button.offset()时获取坐标时值为0;\r\n---------------------------------------------------------------------------------------------------------------------------------------\r\n<div id=\"filePicker\" class=\"webuploader-container\">\r\n<div class=\"webuploader-pick\">请选择图片</div>\r\n<div id=\"rt_rt_1a9hrgustle51qf4dft1prs1d4f1\" style=\"position: absolute; top: 0px; left: 0px; width: 60px; height: 40px; overflow: hidden; bottom: auto; right: auto;\">\r\n<input type=\"file\" name=\"file\" class=\"webuploader-element-invisible\" multiple=\"multiple\" accept=\"image/*\">\r\n<label style=\"opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);\"></label></div></div>\r\n----------------------------------------------------------------------------------------------------------------------------------------\r\n\r\n而button.offset()计算正确的话id=rt_rt_1a9hrgustle51qf4dft1prs1d4f1的DIV样式中left值应该如下:\r\n----------------------------------------------------------------------------------------------------------------------------------------\r\n<div id=\"rt_rt_1a9hrgustle51qf4dft1prs1d4f1\" style=\"position: absolute; top: 0px; left: 186.701416015625px; width: 150px; height: 40px; overflow: hidden; bottom: auto; right: auto;\">\r\n<input type=\"file\" name=\"file\" class=\"webuploader-element-invisible\" multiple=\"multiple\" accept=\"image/*\"><label style=\"opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);\"></label></div>\r\n----------------------------------------------------------------------------------------------------------------------------------------\r\n\r\n请帮助分析一下,如果项目中必须基于在HTML文档初始化过程中DIV是display:none时,然后点击按扭再显示的,有无解决方案能够也支持.\r\n\r\n谢谢\r\n"},"comment":{"url":"https://api.github.com/repos/fex-team/webuploader/issues/comments/173537196","html_url":"https://github.com/fex-team/webuploader/issues/1492#issuecomment-173537196","issue_url":"https://api.github.com/repos/fex-team/webuploader/issues/1492","id":173537196,"user":{"login":"hellolingxh","id":16278653,"avatar_url":"https://avatars.githubusercontent.com/u/16278653?v=3","gravatar_id":"","url":"https://api.github.com/users/hellolingxh","html_url":"https://github.com/hellolingxh","followers_url":"https://api.github.com/users/hellolingxh/followers","following_url":"https://api.github.com/users/hellolingxh/following{/other_user}","gists_url":"https://api.github.com/users/hellolingxh/gists{/gist_id}","starred_url":"https://api.github.com/users/hellolingxh/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/hellolingxh/subscriptions","organizations_url":"https://api.github.com/users/hellolingxh/orgs","repos_url":"https://api.github.com/users/hellolingxh/repos","events_url":"https://api.github.com/users/hellolingxh/events{/privacy}","received_events_url":"https://api.github.com/users/hellolingxh/received_events","type":"User","site_admin":false},"created_at":"2016-01-21T10:55:37Z","updated_at":"2016-01-21T10:55:37Z","body":"会过滤掉HTML代码.再补充 请选择图片这一块内容:\r\n<!--div class=\"queueList\">\r\n\t\t\t\t        <!--div id=\"dndArea\" class=\"placeholder\">\r\n\t\t\t\t            <!--div id=\"filePicker\" class=\"webuploader-container\"><!--div class=\"webuploader-pick\">请选择图片<--/div--><!--div id=\"rt_rt_1a9hsvjds1ptp1cg8dctrmv1b4ia\" style=\"position: absolute; top: 0px; left: 0px; width: 60px; height: 40px; overflow: hidden; bottom: auto; right: auto;\"><!--input type=\"file\" name=\"file\" class=\"webuploader-element-invisible\" multiple=\"multiple\" accept=\"image/*\"><!--label style=\"opacity: 0; width: 100%; height: 100%; display: block; cursor: pointer; background: rgb(255, 255, 255);\"><--/label--><--/div--><--/div-->\r\n\t\t\t\t            <!--p>最多可选4张图片上传<--/p-->\r\n\t\t\t\t        <--/div-->\r\n\t\t\t\t    <!--ul class=\"filelist\"><--/ul--><--ul class=\"filelist\"----><--/ul--><--/div-->"}}