Every day, Bootstrap must learn the Modal plug-in _ javascript Technique

The Modal plug-in that is required by Bootstrap every day. The Modal 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 are interested, refer to the mode box plug-in Bootstrap, this is a very common plug-in for interactive websites.

I. Basic usage
The pop-up window component using the modal box requires three layers of p container elements: modal (modal declaration layer ),
Dialog (window declaration layer) and content (content Layer ). In the content layer, there are three layers: header, body, and footer ).
// Basic instance

 
  
    
    
      
      
        
        ×Member Logon
      
       
        
Currently unable to log on to members
      
      
       
        Register        Login      
    
  

To hide the modal box automatically and click the button to pop up the window, perform the following operations.

// Remove show from the modal box and add an id
// Click the trigger modal box to displayClick the pop-up window// There are three types of pop-up windows, which are normal by default, lg (large) AND sm (small)
// You can set the fade-in or fade-out effect.
// Use the fluid in the grid system in the main part
  
  
    
      
1
      
1
      
1
    
  

Ii. usage instructions
After the basic usage introduction, let's take a look at the important usage of the plug-in. All plug-ins are based on JavaScript/jQuery. There are four elements: usage, parameters, methods, and events.
1. Usage
First, you can use the data attribute

//data-toggledata-toggle="modal" data-target="#myModal"

Data-toggle indicates the trigger type
Data-target indicates the triggered node.

If notBut, where data-target can also use href = "# myModal"

Replace. Of course, we recommend that you use data-target. In addition to the data-toggle and data-target declared attributes, there are also some available options.

2. Parameters
You can set the data-* attribute Declaration on the HTML element to control the effect.

// Blank background and click do not close data-backdrop = "false" // Press esc not close data-keyboard = "false" // initialize hide. If yes, click the button to trigger, the first click cannot be displayed. The second click is displayed. Data-show = "false" // load index.html to the container once href = "index.html"

Of course, you can also set it directly in JavaScript.

// Declare $ ('# mymodal'). modal ({show: true, backdrop: false, keyboard: false, remote: 'index.html',}) through jQuery ',});

3. Method
If the pop-up window is not displayed by default, how can I click the pop-up window before and after?

// Click Show window $ ('# btn '). on ('click', function () {$ ('# mymodal '). modal ('show ');});

4. Events
The modal box supports four time periods: before, after, before, and after the pop-up.

$ ('# Mymodal'). on ('Show. bs. modal', function () {alert (' triggered immediately when the show method is called! ') ;}); $ (' # Mymodal'). on ('shown. bs. modal', function () {alert ('triggered after the modal box is displayed! ') ;}); $ (' # Mymodal'). on ('hide. bs. modal', function () {alert ('triggered immediately when calling the hide method! ') ;}); $ (' # Mymodal'). on ('hiden. bs. modal', function () {alert ('triggered after the modal box is displayed! ') ;}); $ (' # Mymodal'). on ('loaded. bs. modal', function () {alert ('triggered after the remote data is loaded! ');});

The above is all the content of this article, hoping to help you learn.