<a href="#work-element-popup-<?php echo $id; ?>" class="open-popup-link">
    <div class="work-element" style='background-color: <?php echo $data['grid_box_color']?>'; background-
    // Div content
    </div>
</a>

<div id="work-element-popup-<?php echo $id; ?>" class="work-element-popup white-popup mfp-hide">
//Popup content
</div>

function workElementPopup() {
  
  jQuery('.open-popup-link').magnificPopup({
    alignTop : true,type: 'inline',midClick: true,// Allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source in href.
    callbacks: {
      open: function() {
        hideMenu();
      },close: function() {
        displayMenu();

      }
    
    }
  });

}

请注意，我还有更多具有唯一ID的弹出窗口。 函数hideMenu()在我们第一次打开弹出窗口时起作用。 当我打开另一个弹出窗口或同一个弹出窗口时，hideMenu()函数将不会再次触发。