How to use bootstrap modal box

How to use the bootstrap modal box: First import the file and apply the bootstrap modal style to the Body area; then place the content area in the modal style div and set the style of the content area to [modal-content] .

The operating environment of this article: Windows 7 system, bootstrapv4.4.1 version, Dell G3 computer.

Recommended: bootstrap video tutorial

How to use the bootstrap modal box:

1 , First import the required library files in html, as shown in the figure below, be sure to import the jquery file

2, and then we applied the bootstrap modal style in the Body area , as shown in the figure below

3. Then continue to place the content area in the modal style div. The style of the content area is modal-content, as shown in the figure below

4. Then let’s take a look at the three styles of the content area, the head and tail and the middle part, as shown in the figure below

5. Next we define a button. When the button is clicked, a box will pop up, as shown in the figure below

6. Note that the data-target attribute of the button must be specified. , as shown in the picture below

7. After we run the program, we will see the content as shown in the picture below, this is our modal box

The above is the detailed content of How to use bootstrap modal box. For more information, please follow other related articles on the PHP Chinese website!