This article shares the specific code of JavaScript implementation pop-up window for your reference. The specific content is as follows
Ideas
1. Use two divs in general, one as the underlying display and the other as the pop-up window;
2. The two windows are independently designed for CSS, and the reality and hiding are set through the display attribute. It is recommended to use the display attribute instead of the visibility attribute. Visibility:hidden can hide a certain element, but the hidden elements still need to occupy the same space as before they are not hidden, affecting the layout;
3. Design two onclick events in js, specify functions respectively, namely, open pop-up window and close pop-up window.
1. Set two divs
<html> <title>pop up</title> <head> <meta charset="UTF-8"> </head> <body> // The underlying div <div > </div> // Pop-up layer div <div > </div> </body> </html>
2. Set independent CSS for two divs, and set the pop-up window display to none
<html>
<title>pop up</title>
<head>
<meta charset="UTF-8">
<style type="text/css">
body{
background-color: cyan;
}
#popDiv{
display: none;
background-color: crimson;
z-index: 11;
width: 600px;
height: 600px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
</style>
</head>
<body>
// The underlying div <div >
<button onclick="">Pop-up window</button>
</div>
// Pop-up layer div <div >
<div class="close">
// Close button hyperlink <a href="" onclick="">closure</a>
</div>
<p>此处为pop up</p>
</div>
</body>
</html>
3. Define and set pop-up buttons and close window functions
<script type="text/javascript">
function popDiv(){
// Get div element var popBox = ("popDiv");
var popLayer = ("popLayer");
// Control the display and hide of two divs = "block";
= "block";
}
function closePop(){
// Get popup window element let popDiv = ("popDiv");
= "none";
}
</script>
4. Set the function to the onclick event
<button onclick="popDiv();">Pop-up window</button> <a href="javascript:void(0)" onclick="closePop()">closure</a>
5. Set to close the remaining CSS linking CSS and pop interfaces
<style type="text/css">
/* Close link style */
#popDiv .close a {
text-decoration: none;
color: #2D2C3B;
}
/* Close link to pop-up interface */
#popDiv .close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
#popDiv p{
text-align: center;
font-size: 25px;
font-weight: bold;
}
</style>
6. Overall code
<html>
<title>pop up</title>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
function popDiv(){
// Get div element var popBox = ("popDiv");
var popLayer = ("popLayer");
// Control the display and hide of two divs = "block";
= "block";
}
function closePop(){
// Get popup window element let popDiv = ("popDiv");
= "none";
}
</script>
<style type="text/css">
body{
background-color: cyan;
}
#popDiv{
display: none;
background-color: crimson;
z-index: 11;
width: 600px;
height: 600px;
position:fixed;
top:0;
right:0;
left:0;
bottom:0;
margin:auto;
}
/* Close button style */
#popDiv .close a {
text-decoration: none;
color: #2D2C3B;
}
/* Close button for pop-up interface */
#popDiv .close{
text-align: right;
margin-right: 5px;
background-color: #F8F8F8;
}
#popDiv p{
text-align: center;
font-size: 25px;
font-weight: bold;
}
</style>
</head>
<body>
<div >
<button onclick="popDiv();">Pop-up window</button>
</div>
<div >
<div class="close">
<a href="javascript:void(0)" onclick="closePop()">closure</a>
</div>
<p>此处为pop up</p>
</div>
</body>
</html>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.