解決在Bootstrap模糊框中使用WebUploader的問(wèn)題
在我畢設(shè)項(xiàng)目中有個(gè)需求是在Bootstrap模糊框中顯示W(wǎng)ebUploader的上傳按鈕，效果如下：
我們直接在Bootstrap的模糊框中插入了上傳的組件：
然而實(shí)際效果卻是當(dāng)模糊框出現(xiàn)之后，卻無(wú)法點(diǎn)擊到上傳按鈕。
然而在我按F12想要查看控制臺(tái)是否出錯(cuò)后，WebUploader居然可以彈出文件選擇框，而且其他功能也都正常了。
經(jīng)過(guò)查閱資料發(fā)現(xiàn)：出現(xiàn)Bug的原因是[選擇文件]按鈕的長(zhǎng)寬都是0，需要重新渲染一下網(wǎng)頁(yè)，而F12正好有渲染網(wǎng)頁(yè)的功能，解決方案就是重新渲染或?qū)嵗疷ploader。需要重新實(shí)例化：uploader.refresh()
第一想法就是就是給模糊框的按鈕注冊(cè)點(diǎn)擊事件，點(diǎn)擊彈出模糊框的時(shí)候進(jìn)行uploader.refresh()；然而我在我進(jìn)行修改之后貌似有其他BUG。
最后的解決辦法就是監(jiān)聽模糊框觸發(fā)顯示的事件，然后刷新組件：
$('#updateModal').on('shown.bs.modal',function() {//提示框顯示時(shí)候觸發(fā)
uploader.refresh(); //刷新當(dāng)前webUploder
});
總結(jié)
以上所述是小編給大家介紹的解決在Bootstrap模糊框中使用WebUploader的問(wèn)題，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要為大家舉例介紹了js對(duì)象繼承的幾種模式，內(nèi)容很全面，感興趣的小伙伴們可以參考一下2016-01-01
有時(shí)因某種特殊需要，會(huì)獲取span里面的值，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-05-05
js-utils封裝了常用的工具函數(shù),開箱即用,下面這篇文章主要給大家介紹了關(guān)于能夠事半功倍的JS?utils工具函數(shù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-05-05
JS實(shí)用技巧小結(jié)(屏蔽錯(cuò)誤、div滾動(dòng)條設(shè)置、背景圖片位置等)
這篇文章主要介紹了JS實(shí)用技巧,包括常見的js屏蔽錯(cuò)誤、div滾動(dòng)條設(shè)置以及背景圖片位置等,代碼簡(jiǎn)潔易懂,非常實(shí)用,需要的朋友可以參考下2016-06-06
原生js實(shí)現(xiàn)計(jì)算購(gòu)物車總金額的示例
本文主要介紹了原生js實(shí)現(xiàn)計(jì)算購(gòu)物車總金額的示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
詳解基于Vue cli生成的Vue項(xiàng)目的webpack4升級(jí)
這篇文章主要介紹了詳解基于Vue cli生成的Vue項(xiàng)目的webpack4升級(jí)，本文將詳細(xì)介紹從webpack3到webpack4的升級(jí)過(guò)程，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
javascript實(shí)現(xiàn)文字跑馬燈效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)文字跑馬燈效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章介紹了js函數(shù)排序的代碼，有需要的朋友可以參考一下2013-07-07
JS實(shí)現(xiàn)部分HTML固定頁(yè)面頂部隨屏滾動(dòng)效果
這篇文章主要介紹了JS實(shí)現(xiàn)部分HTML固定頁(yè)面頂部隨屏滾動(dòng)效果,涉及JavaScript響應(yīng)onscroll事件動(dòng)態(tài)操作頁(yè)面元素屬性的相關(guān)技巧,需要的朋友可以參考下2015-12-12
JavaScript二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單
這篇文章主要介紹了使用二維數(shù)組實(shí)現(xiàn)的省市聯(lián)動(dòng)菜單，通過(guò)二維數(shù)組存儲(chǔ)城市列表項(xiàng),需要的朋友可以參考下2014-05-05