<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://kit.fontawesome.com/a91a27e46f.js" crossorigin="anonymous"></script> <div class="container"> <center><h2>JQuery Full Screen Search Box</h2></center> <div class="col-12"> <div class="search-bar"> <a href="javascript:;"><i class="fa fa-search"></i></a></i> </div> <div class="search-area"> <span class="closebtn">×</span> <div class="search-field"> <form action=""> <input type="text" placeholder="Search.." name="search"> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> </div> </div>

.search-bar a{ font-size:30px; } .search-area { height: 100%; width: 100%; display: none; position: fixed; z-index: 999; top: 0; left: 0; background-color: rgba(0,0,0, 0.9); } .search-field { position: relative; top: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto; } .search-area .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: white; } .search-area .closebtn:hover { color: #ccc; } .search-area input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white; } .search-area input[type=text]:hover { background: #f1f1f1; } .search-area button { float: left; width: 20%; padding: 15px; background: #ddd; font-size: 17px; border: none; cursor: pointer; } .search-area button:hover { background: #bbb; }

$('.search-bar > a').on('click', function() { $('.search-area').toggle(function() { $(this).animate({ }, 500); }); }); $('.closebtn').on('click', function() { $('.search-area').toggle(function() { $(this).animate({ }, 500); }); });