How to open the bootstrap modal box

The steps to open a modal box in Bootstrap are as follows: Define a modal box container, including .modal and .modal-content classes. Add data attribute data-bs-toggle="modal" and the id of the modal box to the trigger (such as a button or link). Initialize the modal box, select the id of the modal box and call the show method.

How to open a modal box in Bootstrap

Steps to open the modal box:

1. Define modal box:

   • Create modal box elements in HTML, including the .modal class and a unique id .
   • Add .modal-dialog and .modal-content containers.
   • Place modal box contents (such as title, body, and buttons) in .modal-content .

2. Add trigger:

   • Create a button or link and click it to trigger the modal box to open.
   • Use Bootstrap's data-bs-toggle="modal" property and set its value to id of the modal box.

3. Initialize the modal box:

   • In JavaScript, the modal box is initialized so that it can be opened through a trigger.
   • Use Modal class and select the modal box by id .
   • Call the show method to open the modal box.

Code example:

 <code class="html"><!-- 定义模态框--> <div class="modal fade" id="my-modal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"></div>
</div>
</div>
</div></code>

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