CSS से ओवरले इफेक्ट (मोडल/पॉपअप) कैसे बनाएं?

ओवरले पूरे व्यूपोर्ट को कवर करता है (position: fixed; top: 0; left: 0; width/height: 100%)। डिफ़ॉल्ट display: none, बटन क्लिक पर JS से display: block। rgba बैकग्राउंड से पेज डिम होता है। सर्च बार और क्लोज बटन शामिल।

उदाहरण

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css">
  <style>
    body { font-family: Arial; }
    * { box-sizing: border-box; }
    .showBtn {
      background: #008b0c; border: none; color: white;
      padding: 10px 15px; font-size: 20px; cursor: pointer; opacity: 0.8;
    }
    .showBtn:hover { opacity: 1; }
    .overlay {
      height: 100%; width: 100%; display: none; position: fixed;
      z-index: 1; top: 0; left: 0;
      background-color: rgba(0, 0, 0, 0.747);
    }
    .overlay .hideBtn {
      position: absolute; top: 20px; right: 45px;
      font-size: 60px; cursor: pointer; color: rgb(255, 0, 0); opacity: 0.8;
    }
    .overlay .hideBtn:hover { opacity: 1; }
    .overlay input[type=text] {
      padding: 15px; font-size: 17px; border: none; float: left;
      width: 80%; background: white;
    }
    .overlay input[type=text]:hover { background: #f1f1f1; }
    .overlay button {
      float: left; width: 20%; padding: 15px;
      background: rgb(54, 21, 241); font-size: 17px;
      border: none; color: white; cursor: pointer; opacity: 0.8;
    }
    .overlay button:hover { opacity: 1; }
  </style>
</head>
<body>
  <div class="overlay">
    <span class="hideBtn">×</span>
    <div class="searchBar">
      <form> <button type="submit">Close Overlay</button> </form>
    </div>
  </div>
  <h1>Overlay Effect Example</h1>
  <button class="showBtn">Turn Overlay On</button>
  <h2>Click on the above button to try overlay effect</h2>
  <script>
    document.querySelector('.hideBtn').addEventListener('click', hideSearch);
    document.querySelector('.showBtn').addEventListener('click', showSearch);
    function showSearch() { document.querySelector('.overlay').style.display = "block"; }
    function hideSearch() { document.querySelector('.overlay').style.display = "none"; }
  </script>
</body>
</html>