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