search modal bootstrap 4

index.html

<div class="hr-search">
  <span class="icon" type="button" data-toggle="modal" data-target=".search-modal"><img src="<?php echo get_template_directory_uri() .'/assets/img/search.png' ?>" alt=""></span>
  <div class="modal fade search-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <span class="close" data-dismiss="modal" aria-label="Close"><i class="fas fa-times-circle"></i></span>
    <div class="modal-dialog">
      <div class="modal-content">
        <form action="#">
          <div class="modal-input-box">
            <input type="text" placeholder="Search Here">
            <button><i class="fas fa-search"></i></button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

style.css

.search-modal.modal {
    background: rgba(0,0,0,.7);
    z-index: 99999;
}
.search-modal.modal .close {
    opacity: 1;
    color: #ffffff;
    font-size: 24px;
    position: absolute;
    right: 30px;
    top: 30px;
}
.search-modal.modal .modal-dialog {
    height: 100%;
    width: 100%;
}
.search-modal.modal .modal-content {
    margin: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    background: transparent;
}
.search-modal.modal .modal-input-box {
    position: relative;
}
.search-modal.modal .modal-input-box input[type="text"] {
    border-radius: 50px;
    border: 3px solid #ffffff;
    width: 100%;
    background: transparent;
    color: #ffffff;
    font-size: 16px;
    padding: 4px 60px 4px 10px;
    height: 60px;
    outline: none;
}
.search-modal.modal .modal-input-box button {
    padding: 0;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #ffffff;
    font-size: 22px;
    outline: none;
}