The usage of bootstrap remote: first set the main page and place a modal box; then put a button on the main page to trigger the display of the modal window; then bind the click event to the button; finally pass "remote: ' /sys/toAddUser'” can load the content from remote address.
The operating environment of this tutorial: Windows7 system, bootsrap version 3.3.7, this method is suitable for all brand computers.
Recommendation: "bootstrap video tutorial" "css video tutorial"
Bootstrap's Modal is a modal window component that is still very useful, but most of the content in the modal window is loaded from the back end during the development process. To realize that the content of the modal window is loaded from the backend, there are two commonly used implementation methods. They are:
(1) An Iframe is set in Modal, and remote content is loaded through the src of the Iframe. The disadvantage of this method is that the width and height of the modal box are not adjustable, and setting the width and height to a fixed value destroys the responsive layout of bootstrap.
(2) Use Modal's remote parameter to load remote content. This method has some minor bugs (solutions will be introduced later), but this method does not have the trouble of manually setting the width and height of the previous method.
Personally, I prefer the second way, so I will introduce the way to use remote.
Note: The version of bootsrap used this time is 3.3.7
1. Preparation of the page
(1) Main
page Here, first place a modal box on the main page, but the content in the modal box is blank. The data after subsequent remote loading will be automatically filled into the Div of class="modal-content". Prepare the following html code:
1
2
3
4
5
6
7
8
9
After placing the modal window, we can place a button on the main page to trigger the display of the modal window. The html code of this button is as follows:
1 After
adding the user
button and the modal window, we need to bind the button Set the click event, click to display the modal window and load data from remote. The js code is as follows:
1
2
3
4
5
6
7
8
$("#addBtn").click(function(){ // Open the modal box $("#showModal").modal({ backdrop:'static', / / Clicking on the blank does not close the keyboard: false, // Pressing the keyboard esc will not close the remote:'/sys/toAddUser' // The address of the content loaded from the remote }); }); This is the content of the main page. Note: Start I didn’t post the codes related to bootstrap. You need to introduce them yourself when you use them. (2) Preparation of the page to be loaded into the modal box
First of all, let me say that there is no need to introduce any js and css in this page. Because after this page is loaded into the modal, it is equivalent to a part of the main page. It's a bit like the main page gives it a feeling of dynamic import, it can access any content of the main page. This page can be regarded as the DIV content of class="modal-content". After loading, these html codes are embedded in it. Therefore, when writing this page, we can go to the bootstrap official website to copy the code of a modal box, and extract the content inside to make our remote page the most suitable. The code I prepared is as follows:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
×
Add user
account number
username
password
Reset
submission
2. Introduction to the
background In fact, there is nothing to introduce the background code. When the button on the main page is clicked, the background receives the request and returns the prepared page to the past. Realize it with SpringMvc. Therefore, it is not introduced.
Third, the final effect
By clicking the new button on the main page, the modal box pops up, and the remote page is loaded into the remote modal box.
4. Resolve minor bugs
(1) After testing, it is found that after the content of this modal window is loaded once in the background, it will no longer be loaded from the background when the modal window is closed and reopened.
(2) The content in this modal box remains on the main page after loading, and the main page can be accessed directly. This is prone to problems, such as: the id of a dom element in the homepage is the same as the id of the dom element in the modal box, which is prone to bugs. We hope that the content in the modal window will be cleared directly after the modal window is closed. Drop.
The solution to the above two bugs is shown in the following js code, which actually monitors the closing of the modal window
1
2
3
4
5
6
// Every time you hide, clear the data to ensure that it does not conflict with the homepage dom element. Make sure to reload when clicked.
$("#showModal").on("hidden.bs.modal", function() { // This #showModal is the id of the modal box $(this).removeData("bs.modal"); $(this ).find(".modal-content").children().remove(); }); Five, talk about the precautions
It should be noted that the remotely loaded page is actually a small piece of html code, it does not need to separately introduce js and css (such as bootstrap js and css). This is completely different from using Iframe. The content in Iframe can be regarded as a separate page, so you need to introduce js and css yourself when using Iframe.
