<div class="header-search-popup np-hidden" id="search-popup">
  <form class="header-search-popup-form">
    <button class="header-search-popup-form-button">
      <i class="far fa-search"></i>
    </button>
    <input class="header-search-popup-form-input" placeholder="What do you want to learn?" autocomplete="off">
    <div class="header-search-popup-close" onclick="toggleSearch()">
      <i class="fal fa-times" style="margin: auto;"></i>
    </div>
  </form>
</div>

<style>
  .header-search-popup {
    background: white;
    padding: 100px 50px;
    position: absolute;
    top: 0;
    left: 0;
    margin: auto;
    z-index: 100;
    width: 100%;
    min-height: 400px;
  }
  .header-search-popup-form {
    display: flex;
    border-bottom: 1px solid rgb(237, 237, 237);
    margin: auto;
    width: 70%;
    max-width: 1000px;
    padding: 10px 20px;
  }
  .header-search-popup-form-button {
    background: none;
    border: none;
  }
  .header-search-popup-close {
    border-radius: 50%;
    font-size: 20px;
    font-weight: 500;
    display: flex;
    background: #F4F1FE;
    color: blue;
    padding: 20px;
    position: relative;
  }
  .header-search-popup-close .fa-times {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .header-search-popup-form-input::placeholder {
    color: #563150;
    opacity: 1;
  }
  .header-search-popup-form-input {
    border: none;
    outline: none;
    width: 100%;
    color: #563150;
  }
</style>

<script>
  var searchShowed = false
  function toggleSearch() {
    document.getElementById('search-popup').classList.toggle('np-hidden');
    document.getElementById('gray-background').classList.toggle('np-hidden');
    if (searchShowed) {
      window.onscroll = function() {}
    } else {
      window.onscroll = function () { window.scrollTo(0, 0); };
    }
    searchShowed = !searchShowed
  }

</script>