如何点击按钮在弹窗中全屏显示表格内的图片？

问题分析 #

你的现有代码存在几个关键问题导致无法实现需求：

1. 所有表格内的图片使用了相同的id="myImg"，HTML中id必须唯一，因此脚本只能绑定第一个图片的点击事件，其他图片点击无响应。
2. 脚本中尝试获取captionText元素，但模态框里没有对应的DOM节点，会引发控制台错误。
3. 模态框缺少基础样式，无法实现全屏遮罩和图片居中的效果。
4. 同时使用data-toggle和data-bs-toggle属性，可能导致Bootstrap模态框逻辑冲突（根据Bootstrap版本二选一即可）。

修正后的完整代码 #

1. 表格部分（修改图片id为class） #

<table id="table1" class="border-0" style="width: 100%;text-align: left;">
    <thead class="border-0">
        <tr class="text-dark">                          
            <th style="width:10%;">
                Data
            </th>                           
            <th style="width:80%;">
                Explaination
            </th>                            
            <th style="width:1%;text-align:right;">
                Image                             
            </th>
        </tr>
    </thead>
    <tbody>
    @foreach (var item in Model.ImgList)
    {
        <tr class="border-bottom">                               
            <td>                             
                @item.ImgDate.ToShortDateString()
            </td>                                
            <td>
                @Html.DisplayFor(modelItem => item.Text)
            </td>
                <td>
                    <a href="#myModal" class="btn btn-sm btn-dark font-weight-bold border-0"
                       data-id="@item.MyImgId" data-bs-toggle="modal" style="min-width:80px;">
                        <img src="~/grafi/@(item.MyImgId + ".png")" height="50" alt="@item.Text" class="myImg" />
                    </a>                                                                     
                </td>                           
        </tr>
    }
    </tbody>
</table>

2. 弹窗模态框（添加样式容器和标题元素） #

<!-- 模态框基础样式 -->
<style>
.modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    z-index: 1000;
    padding-top: 20px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.9); /* 黑色半透明背景 */
}
.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
}
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
}
.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}
</style>

<!-- The Modal -->
<div id="myModal" class="modal">
    <span class="close">&times;</span>
    <img class="modal-content" id="img01" />
    <div id="caption"></div>
</div>

3. 脚本部分（绑定所有图片的点击事件） #

var modal = document.getElementById("myModal");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
var imgs = document.getElementsByClassName("myImg");

// 给每个图片绑定点击事件
for (var i = 0; i < imgs.length; i++) {
    imgs[i].onclick = function(){
        modal.style.display = "block";
        modalImg.src = this.src;
        captionText.innerHTML = this.alt;
    }
}

// 关闭按钮事件
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
  modal.style.display = "none";
}

// 点击模态框背景关闭
modal.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

关键修改说明 #

• 将图片的id="myImg"改为class="myImg"，确保每个图片都能被脚本捕获。
• 添加了模态框的CSS样式，实现全屏遮罩、图片自适应居中显示的效果。
• 脚本通过遍历所有.myImg元素绑定点击事件，确保每张图片点击都能触发弹窗。
• 移除了冲突的data-toggle属性，保留Bootstrap 5的data-bs-toggle（如果使用Bootstrap 3/4，改为data-toggle即可）。
• 新增了点击模态框背景关闭弹窗的逻辑，提升用户体验。

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