Full Screen Search Example Usign css and jquery

We are giving you pure html,css and jquery full screen search demo. this is responsive full screen search. this design support firefox,chrom and other all browser. fullscreen overlay search box. if full screen search not working then we are help you. this full screen search source code also work in bootstrap 4.

We allows to free snippets of full screen search examples , you can download full code of full screen search bootstrap layout. Here in this post i will give you example of full screen search overlay jquery snippet and you will get simple code of html, css and jquery. In full screen search design snippet i give you three tab with html, css and js, you can easily get code of full screen search css layout.

*{
    box-sizing: border-box;
    font-family: 'Archivo Narrow', sans-serif;
}
.main-section{
    margin:auto;
    margin-top:200px;
    padding:20px;
    text-align:center;
}
.openSearchBtn{
    background:#FF7A5A;
    border: none;
    color:#fff;
    border-radius: 10px;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
}
.openSearchBtn:hover {
    background: #FFB85F;
}
.layout{
    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);
}
.layout-content {
    position: relative;
    top: 46%;
    width: 80%;
    text-align: center;
    margin-top: 30px;
    margin: auto;
}
.layout .layoutclosebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    cursor: pointer;
    color: white;
}
.layout .layoutclosebtn:hover {
    color: #ccc;
}
.layout input[type=text] {
    padding: 15px;
    font-size: 17px;
    border: none;
    float: left;
    width: 80%;
    background: white;
}
.layout input[type=text]:hover {
    background: #f1f1f1;
}
.layout button {
    float: left;
    width: 20%;
    padding: 15px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}
.layout button:hover {
    background: #bbb;
}

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="custom.css"> <link href="https://fonts.googleapis.com/css?family=Archivo+Narrow" rel="stylesheet"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div id="mylayout" class="layout"> <span class="layoutclosebtn" onclick="closeSearch()" title="Close layout">×</span> <div class="layout-content"> <form action="//nicesnippets.com" target="_blank"> <input type="text" placeholder="Search.." name="search"> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> <div class="main-section"> <button class="openSearchBtn" onclick="openSearch()">Open Search Box</button> </div> </body> </html>

*{ box-sizing: border-box; font-family: 'Archivo Narrow', sans-serif; } .main-section{ margin:auto; margin-top:200px; padding:20px; text-align:center; } .openSearchBtn{ background:#FF7A5A; border: none; color:#fff; border-radius: 10px; padding: 10px 15px; font-size: 20px; cursor: pointer; } .openSearchBtn:hover { background: #FFB85F; } .layout{ 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); } .layout-content { position: relative; top: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto; } .layout .layoutclosebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: white; } .layout .layoutclosebtn:hover { color: #ccc; } .layout input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white; } .layout input[type=text]:hover { background: #f1f1f1; } .layout button { float: left; width: 20%; padding: 15px; background: #ddd; font-size: 17px; border: none; cursor: pointer; } .layout button:hover { background: #bbb; }

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