1。解释
我有一个通过表格在页面内收听的图像/图片列表。每个图像/图片都有一个唯一的名称，并成功显示在表中。
我想要的是查看我选择的，全屏，在弹出窗口内，点击按钮。
2.问题
如何在弹出窗口中显示图片？
3.前端代码
//表格
<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-imgid="@(item.MyImgId)" data-toggle="modal" data-bs-toggle="modal" style="min-width:80px;">
<img src="~/grafi/@(item.MyImgId + ".png")" height="50" alt="image" id="myImg" />
</a>
</td>
</tr>
}
</tbody>
</table>
//弹出模式
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img id="img01" style="height:100vh" />
</div>
//脚本
var modal = document.getElementById("myModal");
var img = document.getElementById("myImg");
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.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";
}
刚刚在表中移动了它。似乎运行良好：
// Get the modal
var modal = document.getElementById("myModal");
console.log(modal);
// get the modal image
var caption = document.getElementById("modalImg");
// get the caption span
var caption = document.getElementById("caption");
// Get the <span> element that closes the modal
var close = document.getElementById("close");
// When the user clicks on <span> (x), close the modal
close.onclick = function() {
modal.style.display = "none";
}
const images = document.getElementsByClassName('image');
for (let image of images) {
image.onclick = function(event) {
image = event.target;
modal.style.display = "block";
modalImg.src = image.src;
caption.innertext = image.alt;
}
}body {
font-family: Arial, Helvetica, sans-serif;
}
.image {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.image:hover {
opacity: 0.7;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content,
#caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {
-webkit-transform: scale(0)
}
to {
-webkit-transform: scale(1)
}
}
@keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<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>
<tr class="border-bottom">
<td>
image
</td>
<td>
some text
</td>
<td>
<img class="image" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
</td>
</tr>
<tr class="border-bottom">
<td>
image
</td>
<td>
some text
</td>
<td>
<img class="image" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
</td>
</tr>
</tbody>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">
<span id="close" class="close">×</span>
<img class="modal-content" id="modalImg">
<div id="caption"></div>
</div>
</body>
</html>