以大的弹出窗口显示动态内容

Question

我正在尝试进行动态内容放大弹出。

这是我当前的代码。

if ($queryResult > 0) {
while ($row = mysqli_fetch_assoc($result)) {
  echo "<div class='hvrbox'>
     <img src='image/".$row['mImage']."' alt='' class='hvrbox-layer_bottom' />
     <div class='hvrbox-layer_top'>
       <a href='#posterVid1' class='posterbtn1' id='posterLink1'>Play Trailer</a>
       <div id='posterVid1' class='mfp-hide' style='max-width: 75%; margin: 0 auto;'>
           <iframe width='853' height='480' src='".$row['mLink']."' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>
       </div>
       <a class='posterbtn2' href='movie-detail.php?name=".$row['mName']."'>Movie Details</a>
       <div class='hvrbox-text'>Me Before You</div>
     </div>
   </div>";
      }
    }

这是javascript

$('#posterLink1, #posterLink2, #posterLink3')
.magnificPopup({
      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.
  }) 

由于我正在使用的弹出式窗口仅根据id标签和JavaScript中提供的id打开内容，如果我有不同的内容，则id仍保持不变，并且仅打开按钮相同的内容一遍又一遍，因为id相同。因为我获取的内容来自数据库，所以我不能一遍又一遍地复制代码，只能像在静态页面中一样更改id。

我在做什么错？

Answer 1

问题是您的循环中没有计数器。同样，您不需要id来调用magnificPopup，而是将class用于动态。