День добрый, ещё новичок в разработке, не могу нигде найти информацию по привязке модального окна к компоненту, например: Чтобы модальное окно появлялось около нажатого элемента, не по середине экрана, где-то сбоку, а рядом с нажатым элементом. В интернете не могу найти никакой подобной информации, перебирал библиотеки на гитхабе, связанные с модальными окнами, - ничего , это возможно вообще?
3 ответа
* {
box-sizing: border-box;
}
body {
width: 100%;
min-height: 100vh;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.block {
position: relative;
background-color: royalblue;
display: inline-block;
padding: 0 24px;
margin: 12px;
}
.block:hover .overlay,
.overlay:hover {
display: block;
}
.overlay {
position: absolute;
display: none;
background-color: black;
color: white;
z-index: 99;
padding: 12px 24px;
width: 320px;
}
.overlay.right {
right: 0;
top: 0;
transform: translateX(100%);
}
.overlay.left {
left: 0;
top: 0;
transform: translateX(-100%);
}
.overlay.bottom {
left: 0;
bottom: 0;
transform: translateY(100%);
}
.overlay.top {
left: 0;
top: 0;
transform: translateY(-100%);
}
.overlay.left-top {
left: 0;
top: 0;
transform: translateY(-100%) translateX(-100%);
}
.overlay.left-bottom {
left: 0;
bottom: 0;
transform: translateY(100%) translateX(-100%);
}
.overlay.right-top {
right: 0;
top: 0;
transform: translateY(-100%) translateX(100%);
}
.overlay.right-bottom {
right: 0;
bottom: 0;
transform: translateY(100%) translateX(100%);
}
<div>
<div class="block">
<p>Справа</p>
<div class="overlay right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
</div>
</div>
<div class="block">
<p>Слева</p>
<div class="overlay left">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
</div>
</div>
<div class="block">
<p>Снизу</p>
<div class="overlay bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
</div>
</div>
<div class="block">
<p>Сверху</p>
<div class="overlay top">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
</div>
</div>
</div>
<div>
<div class="block">
<p>Справа-сверху</p>
<div class="overlay right-top">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
</div>
</div>
<div class="block">
<p>Справа-снизу</p>
<div class="overlay right-bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
</div>
</div>
<div class="block">
<p>Слева-сверху</p>
<div class="overlay left-top">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
</div>
</div>
<div class="block">
<p>Слева-снизу</p>
<div class="overlay left-bottom">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent egestas pretium lorem, et ornare diam maximus et. Duis tempor pretium felis a rhoncus.
</div>
</div>
</div>
Судя по описанию ты хочешь добиться чего-то типо контестного меню. Не думаю что резонно использовать в данном случае именно модалку. Можно просто создать View с абсолютным позиционированием (который будет внутри View относительного которого нужно рендерить) и рендерить его по условию. Как вариант использовать уже готовые билиотеки с настраиваемым поведением: https://callstack.github.io/react-native-paper/menu.html https://www.npmjs.com/package/@react-native-menu/menu
-
Через время я нашёл решение: понадобился
ref
компонента иmeasure()
, координаты передал в обычные переменные, это дало возможность привязки модального окна к компоненту. Возможно это тот ещё костыль, но это работает.– Max27 янв в 14:13
Проблема решилась через ref
компонента и применимого к нему метода measure()
, полученные координаты я пихнул тупо в переменную/-ые, так я смог "привязать" модальное окно к компоненту – может это и костыль, но он работает.
Пример использования measure()
в ref
любого компонента (в моём случае вытаскивается местоположение относительно экрана):
ref={(ref) =>
ref?.measure((x, y, width, height, pageX, pageY) => {
X = pageX;
Y = pageY;
})