За последние 24 часа нас посетили 16634 программиста и 1589 роботов. Сейчас ищут 1346 программистов ...

Почти popup окно

Тема в разделе "JavaScript и AJAX", создана пользователем ravnur, 26 авг 2008.

  1. ravnur

    ravnur Активный пользователь

    С нами с:
    24 июн 2008
    Сообщения:
    9
    Симпатии:
    0
    Хочу реализовать что-то среднее между popup окном и формой: кликаешь по кнопке, появляется форма (именно форма, а не страница), в ней можно заполнить некоторые поля и отослать сообщение. Если при этом кликнуть вне формы, то она исчезнет. Примером такой формы может служить окно для добавления отзыва об участнике на searchengines.ru.

    Как можно реализовать такой функционал?
    Можно обойтись html, или нужен javascript или же фреймворк типа jquery?
     
  2. Ti

    Ti Активный пользователь

    С нами с:
    3 июл 2006
    Сообщения:
    2.378
    Симпатии:
    1
    Адрес:
    d1.ru, Екатеринбург
    Это однозначно javascript.
    Некоторые реализации lightbox могут выводить HTML
     
  3. ravnur

    ravnur Активный пользователь

    С нами с:
    24 июн 2008
    Сообщения:
    9
    Симпатии:
    0
    можете сказать какие функции используются для этого в js? или дать пример ?

    из того, что я нашел это только всякие ModalBox, ThickBox на jquery или prototype. хоть в поставке движка и идет jquery, но хочется реализовать без него.
     
  4. neverlose

    neverlose Активный пользователь

    С нами с:
    27 авг 2008
    Сообщения:
    1.112
    Симпатии:
    20
    Сделай див с определённым ид, пусть это будет myFrm, в котором будет эта форма. Отпозицианирую его абсолютно и сверстай форму под дизайн. Таким образом данный див будет поверх твоего контента. Когда закончишь добавь свойство display: none; и див отображаться перестанет.
    Выглядеть это должно примерно вот так:
    <div id="myFrm">
    <form ...
    . .. .. . .
    fieldset... inputs.. labels...
    . . .. ..
    </form>
    </div>

    css:

    #myFrm
    {
    position: absolute;
    display: none;
    }

    А дальше просто, при клике на кнопку, выставляй display: block; для #myFrm, и форма будет отображаться. А при клике в другое место, ставь обратно display: none;

    Примерно должно выглядеть вот так:
    <a href="javascript: void(0); onclick="document.getElementById('myFrm').style.display = 'block';">Заполнить форму</a>

    Дальше... сообразишь.
     
  5. ravnur

    ravnur Активный пользователь

    С нами с:
    24 июн 2008
    Сообщения:
    9
    Симпатии:
    0
    neverlose, да, я уже так и сделал. Подключил еще jquery, сделал обмен данными.
    Но вот одно у меня не получается.
    как это делается? Страница сверстана дивами (движок такой), я пытался приклеить этот обработчик к первому диву, но он не срабатывает. А кликнуть можно по любому элементу. Вот и вопрос - как?
     
  6. Ti

    Ti Активный пользователь

    С нами с:
    3 июл 2006
    Сообщения:
    2.378
    Симпатии:
    1
    Адрес:
    d1.ru, Екатеринбург
    сзади положите (полу-)прозрачный слой, который по z-index будет выше контента, но ниже "почти popup окна"