Изменить расположение всплывающего окна?

Question

Я относительно новичок в этом и пытаюсь создать всплывающее окно. Я не уверен, как заставить всплывающее окно находиться в середине страницы и при этом правильно заполнять поле, поскольку оно оказывается внутри таблицы. Я попытался установить позицию в CSS, но это не сработало. Может я ошибся?

PHP

 foreach ($updateInfo['updates'] as $update) {
  echo "<table><tr><td>";
  if (isset($update['details']['newsDetails']['fldDatePosted'])) {
             echo '<a class="news_popper">'.$update['details']['newsDetails']['fldDatePosted'].'</a><div class="news_pop"><p>'.$update['details']['newsDetails']['fldBody'].'</p></div>';
  }
  echo "</td></tr></table>";
}

CSS

    .news_pop {
        display:none;
        position: absolute;
        z-index: 99999;
        padding: 10px;
        background: #ffffff;
        border: 1px solid #A2ADBC;
    }

JS

   $(function() {
     $('a.news_popper').click(function() {
            $(this).next(".news_pop").toggle();
     });
   });

Answer 1

Я бы посоветовал кодировать всплывающее окно более объектно-ориентированным подходом, чтобы вы могли вызывать его всякий раз, когда оно вам нужно, на всей странице, и при необходимости вы можете иметь несколько экземпляров. Что бы я сделал, так это создать конструктор для всплывающего окна и div, который управляет всплывающими окнами.

Сначала менеджер всплывающих окон:

const popUpManager = (function popUpManager() {


const $popUpManager = document.createElement('div');
  $popUpManager.className = "pop-up_manager";
  
  document.body.append($popUpManager);
  
  return {
    createPopUp: () => {
      const popup = new Popup();
      const $popup = popup.getPopup();
      $popUpManager.append($popup);
      return popup;
    }
  }
})();

Мы создаем div с именем pop-up_manager, который будет содержать ваше всплывающее окно и позволит вам размещать его там, где вам нужно, на странице.

Затем нам нужно создать план того, что такое всплывающее окно:

class Popup{
  constructor() {
    this.$popup = document.createElement('div');
    this.$popup.className = 'pop-up';
    this.$popup.innerHTML = '<div class="exit-button">X</div><div class="body"></div>';
    
    this.$exitButton = this.$popup.querySelector('.exit-button');
    this.$body = this.$popup.querySelector('.body');
    
    this.setUpListeners();
  }
  
  getPopup() {
    return this.$popup;
  }
  
  setContent($content) {
    if (typeof $content === 'string') {
      this.$body.innerHTML = $content;
    } else {
      this.$body.appendChild($content);
    }
  }

Каждый раз, когда мы вызываем новое всплывающее окно (); мы сгенерируем div, плавающий над страницей, который мы можем настроить для размещения всего, что захотим, передав содержимое методу setContent (). Это создаст то, что находится во всплывающем окне.

Наконец, стиль можно настроить так, как вы хотите, в css:

.pop-up {
  position: fixed;
  height: 300px;
  width: 300px;
  background-color: grey;
  
/*  Positioning  */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.body {
  height: 100%;
  width: 100%;
}

.exit-button {
  cursor: pointer;
}

Для вызова всплывающего окна из любого места в вас JS все, что вам нужно сделать, это:

$('a.news_popper').click(function() {
    const popup = popUpManager.createPopUp();

    popup.setContent('<h1>INSERT CONTENT TO SHOW USER HERE</h1>');
});

Вот код: Ссылка на CodePen