How to create a popup with html and css only

Let’s know how to create a popup with html and css only

Popups can be created with HTML and css only with the help of input and css.

use the input type checkbox to close and open the popup based on the checked condition of input.

what to use for this

1. input type checkbox
2. input: checked
3. input:not(:checked)
4. use the label as a button to check or uncheck input

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      transition: all 0.3s;
    }
    body{
      font-family: sans-serif;
    }
    .open{
      display: inline-block;
      padding: 10px 20px;
      background: #000;
      color: #fff;
      margin: 40px;
      border-radius: 10px;
      cursor: pointer;
    }
    .popup{
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 2;
      background: rgba(0,0,0,0.8);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .popup:has(#check:not(:checked)){
      opacity: 0;
      pointer-events: none;
    }
    .popup .body{
      height: 80%;
      width: 80%;
      position: relative;
      min-height: 400px;
      background: #fff;
      border-radius: 16px;
      padding: 2rem;
    }
    .close{
      display: inline-block;
      position: absolute;
      top:-10px;
      right: 0;
      font-size: 40px;
      z-index: 10;
      background: #fff;
      border-radius: 50%;
      height: 40px;
      width: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: all 0.3s;
      cursor: pointer;
    }
    .close:hover{
      font-size: 30px;
    }
  </style>
</head>
<body>
  <label class="open" for="check">open popup</label>
  <div class="popup">
    <input id="check" hidden type="checkbox"/>
    <div class="body">
      <label for="check" class="close">&times;</label>
        
    </div>
  </div>
</body>
</html>

Document open popup

About Author

Ashish Yadav
Software Engineer Follow

Ashish Yadav is a passionate Software Engineer and technology enthusiast having 3 years of experience in web development with a deep interest in the ever-evolving world of technology.

With a background in computer science and extensive experience in software development, Ashish brings a unique perspective to his writing in the tech blogosphere & love to learn and work on technologies