Всплывающий поиск

Автор: karpoff

Может, кому-нибудь пригодится такой скриптик.
Его функциональность:
При нажатии на ссылку в меню Поиск, страница с поиском не загружается, а появляется только окошко  с двумя полями: слова для поиска или автор.
При повторном нажатии, оно исчезает.
Также в окошке есть ссылка "Расширенный поиск", которая ведёт к полной странице поиска.
Это нужно, чтобы не грузить каждый раз полную страницу с поиском.

Скриншот

https://forumupload.ru/uploads/0007/e3/f7/60057-2-f.jpg

Скрипт

<script language="JavaScript">
    document.getElementById("pun-navlinks").style.position = "relative"
    function showDiv()
    {
    if(  document.getElementById("searchDiv").style.display == 'none' )
         document.getElementById("searchDiv").style.display = ''
    else document.getElementById("searchDiv").style.display = 'none'
    return false;
    }
    str  = "<a href=\"search.php\" onclick=\"return showDiv()\"><span>Поиск</span></a>"
    str += "<div id=searchDiv style=\"display: none; \">"
    str += " <form method=\"get\" action=\"search.php\">"
    str += "    <input type=\"hidden\" name=\"action\" value=\"search\">"
    str += "    <p class=\"inputfield\">"
    str += "    <label for=\"fld1\">Ключевые слова</label><br />"
    str += "    <span class=\"input\"><input type=\"text\" name=\"keywords\" size=\"25\" maxlength=\"100\" /></span>"
    str += "    </p>"
    str += "    <p class=\"inputfield\">"
    str += "    <label for=\"fld2\">Поиск автора</label><br />"
    str += "    <span class=\"input\"><input type=\"text\" name=\"author\" size=\"25\" maxlength=\"25\" /></span>"
    str += "    </p> <br>"
    str += "    <input type=\"hidden\" name=\"forum\" value=\"-1\">"
    str += "    <input type=\"hidden\" name=\"search_in\" value=\"all\">"
    str += "    <input type=\"hidden\" name=\"sort_by\" value=\"0\">"
    str += "    <input type=\"hidden\" name=\"sort_dir\" value=\"DESC\">"
    str += "    <input type=\"hidden\" name=\"show_as\" value=\"topics\">"
    str += "    <p><input type=\"submit\" class=\"button\" name=\"search\" value=\"Отправить\" accesskey=\"s\" title=\"Accesskey:s\" /></p>"
    str += " </form>"
    str += "    <a href=\"search.php\">Расширенный поиск</a> "
    str += "</div>"
    document.getElementById('navsearch').innerHTML = str
    </script>
    <style>
    #searchDiv{
    position:absolute;
    background-color : Gray;
    border : solid;
    padding-bottom : 5px;
    padding-left : 5px;
    padding-right : 5px;
    padding-top : 5px;
    z-index:2;
    }
    </style>

Внимание!
Этот скрипт надо вставлять в html-низ!!!
Но в разных браузерах он будет отображаться по-разному.
Cмена цвета  - Gray
Есть параметр background-color
вместо Gray указывай любой, какой захочешь:

Код:
<style>
#searchDiv{
position:absolute;
background-color : Gray;
border : solid;
padding-bottom : 5px;
padding-left : 5px;
padding-right : 5px;
padding-top : 5px;
z-index:2;
}
</style>

Проверенно Rysbb.ru
07 марта 2013 года