سلام دوستان
یه کد جستجو هستش که وقتی تو باکس کلیک میشه باز میشه.وقتی هم که باز میشه یه دکمه داره برای بستنش.اما وقتی رو کمه بستن کلیک میشه میره صفحه دیگه.یا وقتی یه یه کلمه نوشتی اما منصرف شدی بخوای ببندیش وقتی دکمه بستن رو میزنی میره کلمه رو پیدا میکنه.خودم از داخل اینترنت برداشتم این کد رو.اگه کسی راهنمایی کنه ممنون میشم.
کد HTML:<style>#search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #2EB0EC;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}</style>
<style>#popup_searchBox {position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;z-index:9999999;}#popup_searchBox{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000;opacity:0.8;}#popup_searchBox_Data{position:absolute;top:50%;left:50%;width:300px;height:100px;margin:-50px 0 0 -150px;color:#FFFFFF;z-index:9999;}</style><style>.search-form-wrapper{background:#000;background:rgba(0,0,0,.8);z-index:99;position:fixed;width:100%;height:100%;left:0;top:0;display:none}.search-form,.search-form-label,.search-form-overlay,.search-text{position:absolute;left:0}.search-form{width:100%;height:1px;top:40%;text-align:center}.search-form-label{bottom:100%;width:100%;display:block;color:#fff;font-size:40px;font-weight:100}.search-text{top:100%;width:50%;right:0;margin:20px auto 0;background:0 0;border:none;border-bottom:1px dashed #ddd;font-size:60px;color:#fff;text-align:center;outline:0;min-width:300px}.search-form-overlay{width:100%;height:100%;top:0}</style><div id="search-box"><form action="/search" id="search-form" method="get" target="_top"><input onclick="document.getElementById('popup_searchBox').style.display = 'block';" id="search-text" name="q" placeholder="جستجو..." type="text" /></form></div><div id="popup_searchBox" style="display:none;"><div id="popup_searchBox_Data"><!-- Search Box --><div class="search-form-wrapper" style="display: block;"><div class="search-form-overlay"></div><form action="http://www.google.com/search" class="search-form" method="get"> <input type="hidden" name="sitesearch" value="https://mysitename.com" /><label class="search-form-label">Type something and Enter <button onclick="document.getElementById('popup_searchBox').style.display = 'none';">Close</button></label><input class="search-text" name="q" type="text" value=""><button class="hide search-submit" style="display:none;" type="submit"><trans>Search</trans></button></form></div><!-- Search Box --></div></div>
کد HTML:#search-box { position: relative; width: 100%; margin: 0; }
#search-form {height: 40px;border: 1px solid #999;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;background-color: #fff;overflow: hidden;}
#search-text { font-size: 14px; color: #ddd; border-width: 0; background: transparent; }
#search-box input[type="text"] {width: 90%;padding: 11px 0 12px 1em;color: #333;outline: none;} #search-button {position: absolute;top: 0;right: 0;height: 42px;width: 80px;font-size: 14px;color: #fff;text-align: center;line-height: 42px;border-width: 0;background-color: #2EB0EC;-webkit-border-radius: 0px 5px 5px 0px;-moz-border-radius: 0px 5px 5px 0px;border-radius: 0px 5px 5px 0px;cursor: pointer;}
