英文:
How to read image from table and on button click show it full size, inside popup window?
问题
-
Explanation (1)
我有一个图像/图片列表，这些图片位于页面中的一个表格中。每个图像/图片都有一个唯一的名称，并且成功显示在表格中。
我想要的是，在单击按钮时，查看我选择的图像/图片，以全屏显示在弹出窗口中。 -
Question (2)
如何在弹出窗口中显示图片？ -
The frontend code (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%;">
Explanation
</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>
// 弹出窗口
<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";
}
英文:
1. Explaination
I have a list of images/picture that are listen inside a page through a table.
Each image/picture has a unique name and is successfully shown in the table.
What i want is to view the one i choose, in full screen, inside a popup window, on button click.
2. Question
How can i show the picture inside a popup window?
3. The frontend code
// The table
<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 popup modal
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">&times;</span>
<img id="img01" style="height:100vh" />
</div>
//The scripts
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";
}
答案1
得分: 1
以下是您要翻译的代码部分：
Just moved it in a table. Seems to work fine:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// 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;
}
}
<!-- language: lang-css -->
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%;
}
}
<!-- language: lang-html -->
<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.
<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%;">
Explanation
</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>
<!-- end snippet -->
希望这对您有所帮助！
英文:
Just moved it in a table. Seems to work fine:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
// 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;
}
}
<!-- language: lang-css -->
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%;
}
}
<!-- language: lang-html -->
<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">&times;</span>
<img class="modal-content" id="modalImg">
<div id="caption"></div>
</div>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论