Как сделать модальное окно, которое всегда рядом с кнопкой, его вызывающей?

Question

[vladimirir]

Нужно сделать на Vue модальное окно, которое при нажатии на кнопку всегда находится рядом с кнопкой (не перекрывая её), при этом, чтобы при изменении масштаба модалка также не уезжала никуда от кнопки (пример на сайте vc.ru у статей при нажатии на кнопку "Поделиться").

Пытался использовать getBoundingClientRect(), но при этом модалка бегает по странице при масштабировании.

Comments

[Ankhena]

Вы имеете в виду показывать в разные стороны в зависимости от положения кнопки?
position-anchor, но смотрите поддержку.

но при этом модалка бегает по странице при масштабировании

Забыли пересчитывать при масштабировании?

[Андрей]

Возьмите floating-ui, либо посмотрите как это работает у них в исходниках

[Александр Васильев]

Назвать эту «модалку» выпадающим меню» - получить 90% решения

[vladimirir]

Александр Васильев, выпадающее меню обычно в одно место выпадает, а эта штука в разные( Но всё равно полезно, спасибо)

Answer 1

[Николай]

Вот решение
В библиотеках это называется контекстное меню, можно самому сделать, как писали выше, через floating-ui, либо через готовые библиотеки