HTML reset copy

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div id="bax1" class="bax"> <span class="bax3" onclick="closeSearch()" title="Close bax">x</span> <div class="bax-content"> <form action="#"> <input type="text" placeholder="Search for example.com" name="search"> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> <button class="bax2" onclick="openSearch()">Click Open Search</button>

CSS reset copy

body { font-family: tahoma; } * { box-sizing: border-box; } .bax2 { background: #007FFF; border: 1px solid #ccc; padding: 10px 15px; font-size: 20px; cursor: pointer; color:#fff; } .bax2:hover { background: #87ceeb; color:#000; } .bax { height: 100%; width: 100%; display: none; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0,0,0); background-color: rgba(0,0,0, 0.9); } .bax-content { position: relative; top: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto; } .bax .bax3 { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: yellow; } .bax .bax3:hover { color: #ccc; } .bax input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: #007FFF; color: #fff; } .bax input[type=text]:hover { background: #87ceeb; color: #000; } .bax button { float: left; width: 20%; padding: 16px; background: cyan; font-size: 17px; border: none; cursor: pointer; } .bax button:hover { background: #fff; }

Js JAVASCRIPT reset copy

function openSearch() { document.getElementById("bax1").style.display = "block"; } function closeSearch() { document.getElementById("bax1").style.display = "none"; }