Как привязать всплывающий div при нажатии на кнопку?

Question

[alexfrolov_xcx]

Всем доброго времени суток! Как реализовать на js или jq такое: при нажатии на кнопку, рядом с ней всплывает div с формой , причём див всплывает относительно этой кнопки... просьба tooltip и popup не предлагать... интересно как это можно реализовать без старонних библиотек! Заранее спасибо!

Answer 1

[Денис Букреев]

Залезаешь в любую такую библиотеку и смотришь как там реализовано
в кратце:
- создаешь элемент с содержимым, даешь ему position: fixed и с помощью js вычисляешь координаты отслеживаемого элемента, немножко изменяешь их, чтоб правильно позиционировать твой элемент и все, собственно

Comments

[alexfrolov_xcx]

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

[Денис Букреев]

alexfrolov_xcx, смотри плагины тогда
не будут же тебе люди здесь плагин выписывать)

[ThunderCat]

alexfrolov_xcx,

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

так что мешает посмотреть код библиотек? или вы думаете там как-то по особому это реализовано? Или кто-то для вас выпишет основной код оттуда?

Answer 2

[Александр Миранович]

https://jsfiddle.net/8y68deuw/15/

Answer 3

[Саша]

alexfrolov_xcx я бы реализовывал подобное в одном элементе.
это облегчило бы js код.
так как отпадает нужда высчитывать координаты кнопки и позиционировать попап + все это делать снова при ресайзе окна и возможном изменении контента, если хотим иметь качественную верстку.
поэтому кнопку оборачиваете блоком и располагаете на одном уровне с ней ваше всплывающее окно.
позиционировать его нужно будет с помощью css, а js будет лишь добавлять активный класс от которого будем показывать либо скрывать окно.