Of Stack

JavaScript realizes pop up window effect

  • 2021-10-11 17:42:22
  • OfStack

In this paper, we share the specific code of JavaScript pop-up window for your reference. The specific contents are as follows

Train of thought

1. Overall use two div, one as the bottom display and one as the pop-up window;
2. The two windows design CSS independently, and set reality and hiding through display attribute. It is recommended to use display attribute instead of visibility attribute here. visibility: hidden can hide an element, but the hidden element still needs to occupy the same space as before, which affects the layout;
3. Design two onclick events in js, and specify functions respectively, which are opening pop-up window and closing pop-up window.

1. Set two div 


<html>
<title> Pop-up window </title>
<head>
 <meta charset="UTF-8">
</head>
<body>
 //  Bottom layer div
 <div id="popLayer">
 </div>
 //  Ejection layer div
 <div id="popDiv">
 </div>
</body>
</html>

2. Set CSS independently for two div, and set the pop-up window display to none 


<html>
<title> Pop-up window </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>
 //  Bottom layer div
 <div id="popLayer">
 <button onclick=""> Pop-up window </button>
 </div>
 
 //  Ejection layer div
 <div id="popDiv">
 <div class="close">
 //  Close button hyperlink 
 <a href="" onclick=""> Shut down </a>
 </div>
 <p> This is a pop-up window </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 = document.getElementById("popDiv");
  var popLayer = document.getElementById("popLayer");

  //  Control two div Show and hide of 
  popBox.style.display = "block";
  popLayer.style.display = "block";
 }

 function closePop(){
  //  Gets a pop-up element 
  let popDiv = document.getElementById("popDiv");

  popDiv.style.display = "none";
 }
</script>

4. Set the function to the onclick event 


<button onclick="popDiv();"> Pop-up window </button>
<a href="javascript:void(0)" onclick="closePop()"> Shut down </a>

5. Set the remaining CSS that closes the interface linking CSS and pop 


<style type="text/css">
 /*  Turn off link styles  */
 #popDiv .close a {
  text-decoration: none;
  color: #2D2C3B;
 }
 /*  Close link of 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 window </title>
<head>
 <meta charset="UTF-8">
 <script type="text/javascript">
 function popDiv(){
  //  Get div Element 
  var popBox = document.getElementById("popDiv");
  var popLayer = document.getElementById("popLayer");

  //  Control two div Show and hide of 
  popBox.style.display = "block";
  popLayer.style.display = "block";
 }

 function closePop(){
  //  Gets a pop-up element 
  let popDiv = document.getElementById("popDiv");

  popDiv.style.display = "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 of 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 id="popLayer">
 <button onclick="popDiv();"> Pop-up window </button>
 </div>

 <div id="popDiv">
 <div class="close">
  <a href="javascript:void(0)" onclick="closePop()"> Shut down </a>
 </div>
  <p> This is a pop-up window </p>
 </div>
</body>
</html>
Related articles: