Hoe te maken: Volledig scherm zoek

Hoe een volledig scherm zoekvak te maken

Stap 1 - Voeg HTML toe:

<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Sluit Overlay">x</span>
  <div class="overlay-content">
    <form action="action_page.php">
      <input type="text" placeholder="Zoek.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>

Stap 2 - Voeg CSS toe:

/* Zwart achtergrond overlay effect */
.overlay {
  height: 100%;
  width: 100%;
  display: none;
  positie: fixed;
  z-index: 1;
  boven: 0;
  links: 0;
  achtergrond-kleur: rgb(0,0,0);
  achtergrond-kleur: rgba(0,0,0, 0.9); /* Zwart, met een beetje透视 (of transparantie) */
}
/* Inhoud */
.overlay-content {
  positie: relatief;
  boven: 46%;
  breedte: 80%;
  tekst-uitlijning: center;
  marge-boven: 30px;
  marge: auto;
}
/* Sluit knop */
.overlay .closebtn {
  positie: absoluut;
  boven: 20px;
  rechts: 45px;
  font-grootte: 60px;
  cursor: pointer;
  kleur: wit;
}
.overlay .closebtn:hover {
  kleur: #ccc;
}
/* Stel het stijl van het zoekvak in */
.overlay input[type=text] {
  inleg: 15px;
  font-grootte: 17px;
  rand: none;
  float: left;
  breedte: 80%;
  achtergrond: wit;
}
.overlay input[type=text]:hover {
  achtergrond: #f1f1f1;
}
/* Stel het stijl van de submit knop in */
.overlay button {
  float: left;
  breedte: 20%;
  inleg: 15px;
  achtergrond: #ddd;
  font-grootte: 17px;
  rand: none;
  cursor: pointer;
}
.overlay button:hover {
  achtergrond: #bbb;
}

Derde stap - Voeg JavaScript toe:

Gebruik JavaScript om overlay/fulledscreen effecten te openen en sluiten:

// Open het volledige scherm zoekvak
function openSearch() {
  document.getElementById("myOverlay").style.display = "block";
}
// Sluit de volledige scherm zoekvak
function closeSearch() {
  document.getElementById("myOverlay").style.display = "none";
}

Probeer het zelf