How to fully parse Bootstrap pop-up window _ javascript tips-js tutorial

This article comprehensively analyzes the implementation method of Bootstrap pop-up window and analyzes its structure in detail. For more information, see I. Structure Analysis

The modal pop-up boxes in the Bootstrap framework use the "modal", "modal-dialog", and "modal-content" styles respectively, the real content of the pop-up window is placed in "modal-content", which mainly includes three parts:

☑The header of the pop-up box, usually indicated by "modal-header", mainly including the title and the close button

☑The body of the pop-up box, which is usually represented by "modal-body". The main content of the pop-up box

☑In the pop-up box, the foot is usually represented by "modal-footer". The operation button is mainly placed.

 
 
 
 × CloseModal pop-up window title
 
 
Body content of the modal pop-up window
 
 
 Close Save 
 

  

 

 

Ii. data-toggle class trigger pop-up window (JS is not required)

1. Modal pop-up window DeclarationYou only need to customize two necessary attributes: data-toggle and data-target.

 Triggered by data-target
 
 
 
 
 × CloseModal pop-up window title
 
 
Body content of the modal pop-up window
 
 
 Close Save 
 
 

2. data-parameter description

In addition to using data-toggle and data-target to control the modal pop-up window, the Bootstrap framework also provides other custom data-attributes for the modal pop-up box to control the modal pop-up window.

3. JS trigger pop-up window (JS to be written)

1. In addition to using custom properties to trigger the modal pop-up box, you can also use the JavaScript method to trigger the modal pop-up window. An event is triggered by an element. For example, you can give a button a click event and then trigger the modal pop-up window.

HTML:

Click me
 
 
 
 × CloseModal pop-up window title
 
 
Body content of the modal pop-up window
 
 
 Close Save 
 

  

 

 

JS:

 $(function(){ $(".btn").click(function(){ $("#mymodal").modal("toggle"); }); });

2. When the JavaScript trigger mode pop-up window is used, the Bootstrap Framework provides some settings, including

Property settings:

$(function(){ $(".btn").click(function(){ $("#mymodal").modal({  keyboard:false }); });});

Parameter settings:

Event settings:

$ ('# Mymodal'). on ('den den. bs. modal', function (e) {// Process Code ...})

Iv. pop-up window size

The Bootstrap framework also provides different sizes for the modal pop-up window.

One is a large style"Modal-lg ".

  
  
    ... 
   

   

  
 

The other is small size style"Modal-sm ".

  
  
    ... 
   

   

  
 

The above is a full introduction to the implementation method of Bootstrap pop-up window. I hope it will be helpful for your learning.