Change location of pop-up?

Question

I'm relatively new to this and trying to create a pop-up. I'm not sure how to get the pop-up to be in the middle of the page and still populate the box correctly, since it ends up being inside the table. I tried setting a position in the CSS but that didn't work. Maybe I did it wrong?

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

I would suggest coding a popup in a more object oriented approach, that way you can call it whenever you need it throughout the page, and you can have multiple instances if needed. What I would do is create a constructor for the popup and a div that manages the pop ups.

First the pop up manager:

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;
    }
  }
})();

We create a div called pop-up_manager that will house your popup and allow you to place it where ever you need throughout the page.

Then we need to create the blueprint for what a popup is:

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);
    }
  }

Every time we call new Popup(); we will generate a div that floats over the page that we can set to house anything we want by passing content to the setContent() method. This will create what is in the pop up.

Finally, the styling can be configured to whatever you want in the 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;
}

To call the popup from anywhere in you JS all you have to do is:

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

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

Here is a codepen: CodePen Link