更改弹出窗口的位置？

Question

我对此比较陌生，并试图创建一个弹出窗口。 我不确定如何让弹出窗口位于页面中间并仍然正确填充框，因为它最终位于表格内。 我尝试在 CSS 中设置 position 但这没有用。 也许我做错了？

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

我建议以更面向 object 的方法编写一个弹出窗口，这样您就可以在整个页面中随时调用它，并且如果需要，您可以拥有多个实例。 我要做的是为弹出窗口创建一个构造函数和一个管理弹出窗口的 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;
    }
  }
})();

我们创建了一个名为 pop-up_manager 的 div，它将容纳您的弹出窗口，并允许您将其放置在整个页面中您需要的任何位置。

然后我们需要为弹出窗口创建蓝图：

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

每次我们调用 new Popup(); 我们将生成一个浮动在页面上的 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 链接