CSS और JavaScript से फुल स्क्रीन सर्च बॉक्स कैसे बनाएं?

CSS और JavaScript का उपयोग करके एक फुल स्क्रीन सर्च बॉक्स बनाने का पूरा कोड नीचे दिया गया है। यह सर्च बॉक्स बटन पर क्लिक करने पर पूरे स्क्रीन को कवर करते हुए खुलता है।

उदाहरण

<!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; 
    } 
    .overlaySearch { 
      height: 100%; 
      width: 100%; 
      display: none; 
      position: fixed; 
      z-index: 1; 
      top: 0; 
      left: 0; 
      background-color: rgba(132, 150, 155, 0.747); 
    } 
    .searchBar { 
      position: relative; 
      top: 46%; 
      width: 80%; 
      text-align: center; 
      margin-top: 30px; 
      margin: auto; 
    } 
    .overlaySearch .hideBtn { 
      position: absolute; 
      top: 20px; 
      right: 45px; 
      font-size: 60px; 
      cursor: pointer; 
      color: rgb(255, 0, 0); 
      opacity: 0.8; 
    } 
    .overlaySearch .hideBtn:hover { 
      opacity: 1; 
    } 
    .overlaySearch input[type=text] { 
      padding: 15px; 
      font-size: 17px; 
      border: none; 
      float: left; 
      width: 80%; 
      background: white; 
    } 
    .overlaySearch input[type=text]:hover { 
      background: #f1f1f1; 
    } 
    .overlaySearch button { 
      float: left; 
      width: 20%; 
      padding: 15px; 
      background: rgb(54, 21, 241); 
      font-size: 17px; 
      border: none; 
      color: white; 
      cursor: pointer; 
      opacity: 0.8; 
    } 
    .overlaySearch button:hover { 
      opacity: 1; 
    } 
  </style> 
</head> 
<body> 
  <div class="overlaySearch"> 
    <span class="hideBtn">×</span> 
    <div class="searchBar"> 
      <form> 
        <input type="text" placeholder="यहां खोजें.."> 
        <button type="submit"><i class="fa fa-search"></i></button> 
      </form> 
    </div> 
  </div> 
  <h1>फुलस्क्रीन सर्च उदाहरण</h1> 
  <button class="showBtn">सर्च बॉक्स खोलें</button> 
  <h2>ऊपर दिए गए बटन पर क्लिक करके फुल स्क्रीन में सर्च बॉक्स खोलें</h2> 
  <script> 
    document.querySelector('.hideBtn').addEventListener('click', hideSearch); 
    document.querySelector('.showBtn').addEventListener('click', showSearch); 
    function showSearch() { 
      document.querySelector('.overlaySearch').style.display = "block"; 
    } 
    function hideSearch() { 
      document.querySelector('.overlaySearch').style.display = "none"; 
    } 
  </script> 
</body> 
</html>