如何从数据库读取图片并以居中弹窗形式打开？

我当前的脚本从数据库调用图片，已经在本站搜索了数十个相关问题但均未解决，推测这些案例未涉及数据库取图的场景。我的目标是：点击图片后在屏幕中心以弹窗形式打开，而非跳转到新页面或在当前页面打开。

我不介意使用JavaScript或CSS实现，但目前对这两者的了解有限，正在学习中。

编辑2
尝试过lightbox完全无效，也试过onclick="window.open..."，同样没用，最多只会在窗口角落打开一个空白页面。

现有代码片段：

<a href="<?= $imageURL; ?>"><img src="<?= $imageURL; ?>" width="350" /></a>

编辑
完整页面代码：

<table width="100%" border="0" cellspacing="0" cellpadding="0" bgcolor="#000000">
  <tr valign="top" align="left"> 
    <td width="4%"><a style="text-decoration:none" href="/apppages/more.html"><img src="../appimg/arrow.png" width="108" height="68" border="0"></a></td>
    <td width="96%" valign="middle"><a style="text-decoration:none" href="/apppages/more.html">&nbsp;<font color="#CCCCCC" size="6" face="Verdana, Arial, Helvetica, sans-serif">More 
      Links Options</font></a></td>
  </tr>
</table>
<p><br>
</p>
<p> <img src="header2.jpg" width="921" height="479"><br>
  <font size="7"><br>
  <a href="app-form.php" target="_blank"><font face="Verdana, Arial, Helvetica, sans-serif" color="#9999FF">TAP 
  HERE TO ADD YOUR SELFIE</font></a></font><br>
  <br>
  <?php
include 'config.php';
// Get images from the database
$query = $db->query("SELECT nameviewer, file_name FROM image ORDER BY uploaded_on DESC");
?> </p>
</div>
<table width="20%" border="1" cellspacing="0" cellpadding="0" align="center">
  <?php
$i = 0;
while ($row = $query->fetch_assoc()){ 
    $nameviewer = 'uploads/'.$row["nameviewer"];
    $imageURL = 'uploads/'.$row["file_name"];
    if ($i++ % 4 == 0) { // start new row before each group of 4
        echo '<tr>';
    }
    ?> 
  <td valign="top"> 
    <div align="center"><a href="<?= $imageURL; ?>"><img src="<?= $imageURL; ?>" width="350" /></a><br>
      <font color='lightblue'> <b><font size="6"><?php echo htmlspecialchars($row["nameviewer"]);  ?></font></b></font><br>
        <font size="6"><i><font color="#999999">Tap The Pic To Expand</font></i></font> 
      </div>
  </td>
  <?php
    if ($i % 4 == 0) { // end row after a group of 4
        echo '</tr>';
    }
}
if ($i % 4 != 0) { // end the last row if it wasn't an even multiple of 4
    echo '</tr>';
}
?> 
</table>

原生JS+CSS实现方案 #

不用依赖第三方插件，直接添加以下代码即可实现需求：

1. 添加CSS样式（放在页面<head>标签内）

/* 弹窗遮罩层 */
.image-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  z-index: 9999;
}

/* 弹窗图片容器 */
.modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 90%;
  max-height: 90%;
}

/* 关闭按钮 */
.close-modal {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
}

.close-modal:hover {
  color: #ccc;
}

2. 修改图片点击逻辑（替换PHP循环中的<a>标签）

把原来的图片链接代码：

<a href="<?= $imageURL; ?>"><img src="<?= $imageURL; ?>" width="350" /></a>

替换为：

<img src="<?= $imageURL; ?>" width="350" onclick="openModal('<?= $imageURL; ?>')" style="cursor: pointer;" />

3. 添加弹窗结构与JS代码（放在页面</body>标签前）

<!-- 弹窗结构 -->
<div class="image-modal" id="imageModal">
  <span class="close-modal" onclick="closeModal()">&times;</span>
  <img class="modal-content" id="modalImage">
</div>

<script>
// 打开弹窗
function openModal(imageSrc) {
  const modal = document.getElementById('imageModal');
  const modalImg = document.getElementById('modalImage');
  modal.style.display = 'block';
  modalImg.src = imageSrc;
}

// 关闭弹窗
function closeModal() {
  const modal = document.getElementById('imageModal');
  modal.style.display = 'none';
}

// 点击遮罩层关闭弹窗
window.onclick = function(event) {
  const modal = document.getElementById('imageModal');
  if (event.target === modal) {
    closeModal();
  }
}
</script>

功能说明 #

• 点击图片即可触发弹窗，图片自动居中显示，最大占屏幕90%的宽高，适配不同设备
• 点击右上角的×或遮罩层空白区域，均可关闭弹窗
• 纯原生代码，无需第三方库，适合新手理解学习

内容的提问来源于stack exchange，提问作者Christopher Robbins