Как сделать всплывающие блоки под кнопкой?

Question

[busidoway]

Добрый день. Как можно реализовать всплывающий блок под кнопкой? Допустим, есть несколько кнопок (либо ссылок) на странице, есть скрытый блок. Необходимо, чтобы при нажатии на какую-либо кнопку этот блок всплывал под кнопкой. Были мысли сделать как всплывающую подсказку.

Comments

[sergey]

можно с помощью табов на jquery реализовать

[busidoway]

SM: Jquery UI?

[sergey]

busidoway: судя по тому что вы нарисовали, то даже обычные модальные окна возможны

[busidoway]

SM: Да, можно модальными окнами сделать, но как расположить окно под нажатой кнопкой?

[sergey]

busidoway: ну да модальное будет по центру страницы всплывать, а спозиционировать

[Сергей Сергей]

абсолютное модальное окно можно сунуть внутрь относительной кнопки, со смещением.

[busidoway]

Как вариант набросал подобное jsfiddle.net/4etnrokp

[busidoway]

Может, кому пригодится

Answer 1

[Идель Гизатуллин]

Если используете jQuery, то так:

var $tip = $('#tip') // селектор подсказки

$('#button').click(function () {
  $tip.toggle()
})

Comments

[busidoway]

Все верно, но еще необходимо как-то установить расположение блока именно под нажатой кнопкой. Т.е. у блока задано свойство position: absolute. И нужно всякий раз как-то либо координаты вычислять, либо что-то еще.

[Евгений]

busidoway: зачем вычислять? позиционируем относительно родительского блока на который навели (нажали). Типа bottom: -30px и left: 0 - будет ниже блока с кнопкой

Answer 2

[busidoway]

как-то так

Answer 3

[Евгений]

на JQurey
внутри блока .block вставляем абсолютно спозиционированный блок .hiddenBlock, скрыв его через css.

$(".button").click(function (){  /*обработка клика по кнопке*/
      $(this).parents(".block").find(".hiddenBlock").fadeIn(); /*ищем родителя элемента по которому кликнули, в родителе ищем скрытый блок и проявляем его */
});