Using jQuery and Bootstrap to implement multi-layer, adaptive modal windows_jquery

This article practices a multi-layer modal window, and it is adaptive.

Click a button on the page to pop up the first layer of adaptive modal window.

Contains a button in the first layer modal window. Click the button to pop up the second layer modal window. The pop-up second layer modal window will block the first layer modal window, that is, the second layer modal window. When open, the first layer modal window cannot be closed.

The specific page implementation part is as follows:

Copy code The code is as follows:

   
   
   
   
   
   


       

            打开第一层模态窗口
       

       

           

                ×
               

第一层模态窗口

           

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           Open the second layer modal window
The first layer of main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
The first layer of main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    第一层主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
                    主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容主体内容
               

           

           

                关闭
           

       

       

           

                ×
               

第二层模态窗口

           

                                                                                                                                                                                                                                                                                                                                        The second layer of main content main content main content main content main content main content main content main content main content main content main content main content main content main content main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content Main content
                                                                                                                                                                                                                                                         

                                                                                                                                                                                                                                         Close
                                                                                                                                                                                                               



The above is the entire content of jQuery and Bootstrap to implement multi-layer and adaptive modal windows. It is very good and practical, and can be used directly in projects.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn