0

День добрый, ещё новичок в разработке, не могу нигде найти информацию по привязке модального окна к компоненту, например: Чтобы модальное окно появлялось около нажатого элемента, не по середине экрана, где-то сбоку, а рядом с нажатым элементом. В интернете не могу найти никакой подобной информации, перебирал библиотеки на гитхабе, связанные с модальными окнами, - ничего , это возможно вообще?

1
  • Пожалуйста, уточните вашу конкретную проблему или приведите более подробную информацию о том, что именно вам нужно. В текущем виде сложно понять, что именно вы спрашиваете. 24 мар 2022 в 9:01

3 ответа 3

0

* {
  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>

0

Судя по описанию ты хочешь добиться чего-то типо контестного меню. Не думаю что резонно использовать в данном случае именно модалку. Можно просто создать View с абсолютным позиционированием (который будет внутри View относительного которого нужно рендерить) и рендерить его по условию. Как вариант использовать уже готовые билиотеки с настраиваемым поведением: https://callstack.github.io/react-native-paper/menu.html https://www.npmjs.com/package/@react-native-menu/menu

1
  • Через время я нашёл решение: понадобился ref компонента и measure(), координаты передал в обычные переменные, это дало возможность привязки модального окна к компоненту. Возможно это тот ещё костыль, но это работает.
    – Max
    27 янв в 14:13
0

Проблема решилась через ref компонента и применимого к нему метода measure(), полученные координаты я пихнул тупо в переменную/-ые, так я смог "привязать" модальное окно к компоненту – может это и костыль, но он работает.
Пример использования measure() в ref любого компонента (в моём случае вытаскивается местоположение относительно экрана):

ref={(ref) =>
    ref?.measure((x, y, width, height, pageX, pageY) => {
      X = pageX;
      Y = pageY;
    })

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.