Блог

Я родом из C #, так что потерпите, я уже знаю, что мой подход к этому не идеален:

Но мне нужно это сделать:

Создайте центрированное всплывающее окно, которое прокручивается вместе со страницей, когда пользователь нажимает на какой-либо текст. код должен быть встроен JavaScript в HTML-страницы, ничего на стороне сервера (кроме, возможно, css).

-предпочтительно текстовые ссылки на всплывающие окна должны быть повторно использованы Я не хочу вставлять кучу кода для каждой ссылки.

-Я просмотрел множество «всплывающих» руководств / примеров, но поскольку мне нужен встроенный javascript на стороне клиента, это ограничивает то, что работает.

В результате я хотел бы иметь веб-страницу с готовыми всплывающими окнами, на которые я мог бы ссылаться с других веб-страниц, таких как openPopup(webpage.getElement(popupNumber12)), или иметь массивы с заголовками всплывающих окон, описания, которые я могу передать.

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

 .modal {
   width: 300px;
   height: 300px;
   position: absolute;
   left: 50%;
   top: 50%; 
   margin-left: -150px;
   margin-top: -150px;
   }
  

Предполагая, что ширина модального элемента, который вы хотите отобразить, равна 300 пикселей.

Если вы работаете с SCSS

 $width = 300px
$height = 300px

.modal {
    width: $width;
    height: $height;
    position: absolute;
    left: calc(50% - $width)
    top: calc(50% - $height)
}