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

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

У меня есть всплывающее окно, которое отображается в определенном месте на изображении, моя цель — определить положение элемента и проверить, находится ли он ближе к концу левой или правой части браузера. По сути, то, что происходит сейчас, — это то, что всплывающее окно перекрывается / вырезается окном браузера. Я хочу определить, когда это происходит, и если происходит слева, всплывающее окно перемещается вправо, и наоборот. Есть предложения, как мне это сделать?

Комментарии:

1. Пожалуйста, большинство подобных вопросов получили много голосов «против». но я ненавижу это делать, пожалуйста, отправьте код.

Ответ №1:

Вы можете использовать, css чтобы установить left для свойства элемента значение, равное 50vw половине вертикальной ширины окна просмотра минус половина width элемента, установленное text-align в center

 #popup {
  position: relative;
  left: calc(50vw - 100px);
  width: 200px;
  border: 1px solid #000;
  padding: 8px;
  text-align: center;
}  
 <div id="popup">ABCD EF GHIJKLMN</div>