问题:将百度webuploader的上传控件放置在bootstrap的模态窗时,当进入页面就初始化webuploader,然后再弹出模态窗时,会发现上传按钮不能点击,但在窗口大小改变时,按钮又可以点击了
分析:通过打开浏览器的开发者工具,查看到对应的按钮,可以看到在初始化时,真正可点击的按钮的样式为:position:absolute;top:0;left:0;width:1px;height:1px;它的样式取决于我们能看到的那个蓝色的像是按钮,但其实只是个div的元素,该元素有个类:webuploader-pick,上传按钮的位置是根据该元素的offset()来设置的,宽高是该元素的宽高,由于bootstrap的模态窗在未弹出来时,它是display:none的,所以在获取.webuploader-pick这个div的offset()时,返回的是{"top":0,"left":0},获取的宽高也不是实际的宽高,所以就导致按钮的初始化样式有问题。
而在浏览器的窗口大小改变时,按钮又正常了,此时,按钮的样式是正确的,它与.webuploader-pick这个元素重叠了,通过查看源代码可以发现,在按钮初始化时,监听了窗口的resize事件,会触发按钮的refresh方法,该方法就是在给按钮设置样式,即位置和宽高,参照的就是.webuploader-pick这个元素的样式,在模态窗弹出来时,此时已经可以正确获取.webuploader-pick元素的样式值,所以按钮就可以点击了,网上有人说在弹出模态窗后打开浏览器的开发者工具,按钮就正常了,其实就是因为浏览器窗口的resize事件触发了按钮的refresh方法,所以解决这个问题的办法就很简单了
解决:模态窗有个弹出事件:shown.bs.modal,在这个事件发生后,触发浏览器窗口的resize事件
$(modal).on("shown.bs.modal",function(){
$(window).trigger("resize");
})