How to normally use webuploader to upload plug-ins in the pop-up window of the bootstrap mode box

In today's work, I encountered a difficult problem. When the company's back-end colleagues used the bootstrap modal box and combined WebUploader to implement the background file upload function, they found that clicking the upload button was invalid. Colleagues asked me for help. After some research, I found three solutions and deeply analyzed their solutions.

First of all, let's explore the core of this problem: Why is it that there is a problem when the upload control is placed in the modal box, but everything is normal when it is placed in a normal DOM element? I guess the problem originates from the fact that the initial state of the DOM structure of the modal box is a hidden element, and its display attribute is none. When JavaScript code is executed on an element whose display attribute is none, the code will not take effect. Therefore, to solve this problem, we need to ensure that the modal box is rendered and its corresponding DOM nodes are loaded on the page, and then re execute the JavaScript code of the uploaded control.

Based on this idea, I propose the following three solutions:

1. Using uploader.refresh(); After the modal box is loaded, execute this function. The example code is as follows.

 $(‘#myModal‘).on(‘shown.bs.modal‘, function () { //The method of executing the redraw button after the modal box is loaded. uploader.refresh(); });

2. After loading the modal box, redraw the button. The example code is as follows.

 function create_Upbox(){ uploader.addButton({ id: '#picker', InnerHTML: 'Select file' }); } $('#myModal').on('shown.bs.modal', function () { create_Upbox(); });

3. After the modal box pop-up window is executed, execute the upload control button Js code , the example code is as follows.

 $('#myModal').on('hide.bs.modal', function () { uploader.destroy(); });