Bootstrap modal box at the front end

Bootstrap modal box at the front end
Introduction: A Modal box is a child form that overwrites the parent form. Normally, the purpose is to display the content from a separate source. Some interactions can be made without leaving the parent form. Subforms provide information and interaction.

• Introduction to Modal
• Modal implementation pop-up form
• Modal deletion prompt box
• Other usage

Bootstrap Modal box (Modal) Plug-in

A Modal box is a child form that overwrites the parent form. Normally, the purpose is to display the content from a separate source. Some interactions can be made without leaving the parent form. Subforms provide information and interaction.

If you want to independently reference the functions of this plug-in, you need to referenceModal. js. Alternatively, you can referenceBootstrap. jsOr compressed versionBootstrap. min. js.

<! DOCTYPE html> 
Code Description:

 

 
  
To use a modal window, you need a trigger. You can use buttons or links. Here we use buttons.
 
  
If you carefully check the above Code, you will find in the <button> tag,Data-target = "# myModal"Is the target of the modal box you want to load on the page. You can create multiple modal boxes on the page and create different triggers for each modal box. Now, it is obvious that you cannot load multiple modules at the same time, but you can create multiple modules on the page for loading at different times.
 
  
Note the following two points in the modal box:
 
  
Aria-labelledby = "myModalLabel"This attribute references the title of the modal box.
 
  
AttributeAria-hidden = "true"It is used to keep the modal window invisible until the trigger is triggered (for example, click the relevant button ).
 
  
<Div class = "modal-header"> modal-header is a class that defines the style for the header of the modal window.
 
  
Class = "close", Close is a CSS class used to set the style for the close button of the modal window.
 
  
Data-dismiss = "modal"Is a custom HTML5 data attribute. Here it is used to close the modal window.
 
  
Class = "modal-body"Is a CSS class of Bootstrap CSS, used to set the style for the subject of the modal window.
 
  
Class = "modal-footer"Is a CSS class of Bootstrap CSS, used to set the style at the bottom of the modal window.
 
  
Data-toggle = "modal", HTML5 custom data attribute data-toggle is used to open the modal window.