Home > Developer > JavaScript
JQuery and Bootstrap are used to implement multi-layer and adaptive modal windows. jquerybootstrap
This article uses a multi-layer modal window and is adaptive.
Click a button on the page to bring up the first adaptive mode window.
A button is included in the modal window of the first layer. Click this button to bring up the modal window of the second layer. The modal window of the second layer will block the modal window of the first layer, that is, when the second modal window is opened, the first modal window cannot be closed.
The page implementation is as follows:
Copy codeThe Code is as follows:
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet"/>
<Script src = "Scripts/jquery-2.1.1.min.js"> </script>
<Script src = "bootstrap/js/bootstrap. min. js"> </script>
<Style type = "text/css">
. Modal-open,
. Modal-open. navbar-fixed-top,
. Modal-open. navbar-fixed-bottom {
Margin-right: 0;
}
. Modal {
Bottom: auto;
Padding: 0;
Background-color: # ffffff;
Border: 1px solid #999999;
Border: 1px solid rgba (0, 0, 0, 0.2 );
Border-radius: 6px;
-Webkit-box-shadow: 0 3px 9px rgba (0, 0, 0, 0.5 );
Box-shadow: 0 3px 9px rgba (0, 0, 0, 0.5 );
Background-clip: padding-box;
Overflow-y: auto;
}
. Modal. container {
Max-width: none;
}
# Firstmodal {
Width: 98%;
Height: 98%;
}
# Secondmodal {
Width: 99%;
Height: 99%;
}
</Style>
<Script type = "text/javascript">
$ (Function (){
$ ('# M1'). on ("click", function (){
$ ('# Firstmodal'). modal ();
});
$ ('# M2'). on ("click", function (){
$ ('# Secondmodal'). modal ();
});
});
</Script>
</Head>
<Body>
<Div class = "content" style = "margin-left: 100px; margin-top: 100px;">
<Button class = "btn-primary btn-lg" id = "m1"> open the first modal window </button>
</Div>
<Div id = "firstmodal" class = "modal container fade" tabindex = "-1" style = "display: none;">
<Div class = "modal-header">
<Button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> × </button>
<H4 class = "modal-title"> first-layer modal window </Div>
<Div class = "modal-body">
<P>
<Button class = "btn-primary btn-lg" id = "m2"> open the second layer modal window </button>
Level 1 subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Level 1 subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Level 1 subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
</P>
</Div>
<Div class = "modal-footer" style = "text-align: center;">
<Button type = "button" data-dismiss = "modal" class = "btn-default"> close </button>
</Div>
</Div>
<Div id = "secondmodal" class = "modal container fade" tabindex = "-1" style = "display: none;">
<Div class = "modal-header">
<Button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true"> × </button>
<H4 class = "modal-title"> Layer 2 modal window </Div>
<Div class = "modal-body">
<P>
Level 2 subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
Subject content subject content
</P>
</Div>
<Div class = "modal-footer" style = "text-align: center;">
<Button type = "button" data-dismiss = "modal" class = "btn-default"> close </button>
</Div>
</Div>
</Body>
The above is all the content of jQuery and Bootstrap implementing multi-layer and adaptive modal windows. It is very good and practical and can be directly used in the project.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
