如何从表格中读取图像，并在按钮单击时在弹出窗口中以全尺寸显示？

huangapple
go评论103阅读模式
英文:

How to read image from table and on button click show it full size, inside popup window?

问题

  1. Explanation (1)
    我有一个图像/图片列表，这些图片位于页面中的一个表格中。每个图像/图片都有一个唯一的名称，并且成功显示在表格中。
    我想要的是，在单击按钮时，查看我选择的图像/图片，以全屏显示在弹出窗口中。

  2. Question (2)
    如何在弹出窗口中显示图片？

  3. The frontend code (3)

  1. // 表格
  2. <table id="table1" class="border-0" style="width: 100%; text-align: left;">
  3.     <thead class="border-0">
  4.         <tr class="text-dark">
  5.             <th style="width:10%;">
  6.                 Data
  7.             </th>
  8.             <th style="width:80%;">
  9.                 Explanation
  10.             </th>
  11.             <th style="width:1%; text-align:right;">
  12.                 Image
  13.             </th>
  14.         </tr>
  15.     </thead>
  16.     <tbody>
  17.         @foreach (var item in Model.ImgList)
  18.         {
  19.             <tr class="border-bottom">
  20.                 <td>
  21.                     @item.ImgDate.ToShortDateString()
  22.                 </td>
  23.                 <td>
  24.                     @Html.DisplayFor(modelItem => item.Text)
  25.                 </td>
  26.                 <td>
  27.                     <a href="#myModal" class="btn btn-sm btn-dark font-weight-bold border-0"
  28.                        data-id="@item.MyImgId" data-imgid="@(item.MyImgId)" data-toggle="modal" data-bs-toggle="modal" style="min-width:80px;">
  29.                         <img src="~/grafi/@(item.MyImgId + ".png")" height="50" alt="image" id="myImg" />
  30.                     </a>
  31.                 </td>
  32.             </tr>
  33.         }
  34.     </tbody>
  35. </table>
  37. // 弹出窗口
  38. <div id="myModal" class="modal">
  39.     <span class="close">&times;</span>
  40.     <img id="img01" style="height:100vh" />
  41. </div>
  43. // 脚本
  44. var modal = document.getElementById("myModal");
  45. var img = document.getElementById("myImg");
  46. var modalImg = document.getElementById("img01");
  47. var captionText = document.getElementById("caption");
  49. img.onclick = function() {
  50.     modal.style display = "block";
  51.     modalImg.src = this.src;
  52.     captionText.innerHTML = this.alt;
  53. }
  55. var span = document.getElementsByClassName("close")[0];
  56. span.onclick = function() {
  57.     modal.style.display = "none";
  58. }
英文:

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

  1.   &lt;table id=&quot;table1&quot; class=&quot;border-0&quot;
  2. style=&quot;width: 100%;text-align: left;&quot;&gt;
  3. &lt;thead class=&quot;border-0&quot;&gt;
  4. &lt;tr class=&quot;text-dark&quot;&gt;                          
  5. &lt;th style=&quot;width:10%;&quot;&gt;
  6. Data
  7. &lt;/th&gt;                           
  8. &lt;th style=&quot;width:80%;&quot;&gt;
  9. Explaination
  10. &lt;/th&gt;                            
  11. &lt;th style=&quot;width:1%;text-align:right;&quot;&gt;
  12. Image                             
  13. &lt;/th&gt;
  14. &lt;/tr&gt;
  15. &lt;/thead&gt;
  16. &lt;tbody&gt;
  17. @foreach (var item in Model.ImgList)
  18. {
  19. &lt;tr class=&quot;border-bottom&quot;&gt;                               
  20. &lt;td&gt;                             
  21. @item.ImgDate.ToShortDateString()
  22. &lt;/td&gt;                              
  23. &lt;td&gt;
  24. @Html.DisplayFor(modelItem =&gt; item.Text)
  25. &lt;/td&gt;
  26. &lt;td&gt;
  27. &lt;a href=&quot;#myModal&quot; class=&quot;btn btn-sm btn-dark font-weight-bold border-0&quot;
  28. data-id=&quot;@item.MyImgId&quot; data-imgid=&quot;@(item.MyImgId)&quot; data-toggle=&quot;modal&quot; data-bs-toggle=&quot;modal&quot; style=&quot;min-width:80px;&quot;&gt;
  29. &lt;img src=&quot;~/grafi/@(item.MyImgId + &quot;.png&quot;)&quot; height=&quot;50&quot; alt=&quot;image&quot; id=&quot;myImg&quot; /&gt;
  30. &lt;/a&gt;                                                                     
  31. &lt;/td&gt;                           
  32. &lt;/tr&gt;
  33. }
  34. &lt;/tbody&gt;
  35. &lt;/table&gt;

//The popup modal

  1. &lt;!-- The Modal --&gt;
  2. &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
  3. &lt;span class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt;
  4. &lt;img id=&quot;img01&quot; style=&quot;height:100vh&quot; /&gt;
  5. &lt;/div&gt;

//The scripts

  1. var modal = document.getElementById(&quot;myModal&quot;);
  2. var img = document.getElementById(&quot;myImg&quot;);
  3. var modalImg = document.getElementById(&quot;img01&quot;);
  4. var captionText = document.getElementById(&quot;caption&quot;);
  5. img.onclick = function(){
  6. modal.style.display = &quot;block&quot;;
  7. modalImg.src = this.src;
  8. captionText.innerHTML = this.alt;
  9. }
  10. var span = document.getElementsByClassName(&quot;close&quot;)[0];
  11. span.onclick = function() {
  12. modal.style.display = &quot;none&quot;;
  13. }

答案1

得分: 1

以下是您要翻译的代码部分：

  1. Just moved it in a table. Seems to work fine:
  3. <!-- begin snippet: js hide: false console: true babel: false -->
  5. <!-- language: lang-js -->
  7.     // Get the modal
  8.     var modal = document.getElementById("myModal");
  9.     console.log(modal);
  10.     // get the modal image
  11.     var caption = document.getElementById("modalImg");
  12.     // get the caption span
  13.     var caption = document.getElementById("caption");
  14.     // Get the <span> element that closes the modal
  15.     var close = document.getElementById("close");
  16.     // When the user clicks on <span> (x), close the modal
  17.     close.onclick = function() {
  18.       modal.style display = "none";
  19.     }
  20.     const images = document.getElementsByClassName('image');
  21.     for (let image of images) {
  22.       image.onclick = function(event) {
  23.         image = event.target;
  24.         modal.style display = "block";
  25.         modalImg.src = image.src;
  26.         caption.innertext = image.alt;
  27.       }
  28.     }
  30. <!-- language: lang-css -->
  32.     body {
  33.           font-family: Arial, Helvetica, sans-serif;
  34.         }
  35.         
  36.         .image {
  37.           border-radius: 5px;
  38.           cursor: pointer;
  39.           transition: 0.3s;
  40.         }
  41.         
  42.         .image:hover {
  43.           opacity: 0.7;
  44.         }
  45.         /* The Modal (background) */
  46.         
  47.         .modal {
  48.           display: none;
  49.           /* Hidden by default */
  50.           position: fixed;
  51.           /* Stay in place */
  52.           z-index: 1;
  53.           /* Sit on top */
  54.           padding-top: 100px;
  55.           /* Location of the box */
  56.           left: 0;
  57.           top: 0;
  58.           width: 100%;
  59.           /* Full width */
  60.           height: 100%;
  61.           /* Full height */
  62.           overflow: auto;
  63.           /* Enable scroll if needed */
  64.           background-color: rgb(0, 0, 0);
  65.           /* Fallback color */
  66.           background-color: rgba(0, 0, 0, 0.9);
  67.           /* Black w/ opacity */
  68.         }
  69.         /* Modal Content (image) */
  70.         
  71.         .modal-content {
  72.           margin: auto;
  73.           display: block;
  74.           width: 80%;
  75.           max-width: 700px;
  76.         }
  77.         /* Caption of Modal Image */
  78.         
  79.         #caption {
  80.           margin: auto;
  81.           display: block;
  82.           width: 80%;
  83.           max-width: 700px;
  84.           text-align: center;
  85.           color: #ccc;
  86.           padding: 10px 0;
  87.           height: 150px;
  88.         }
  89.         /* Add Animation */
  90.         
  91.         .modal-content,
  92.         #caption {
  93.           -webkit-animation-name: zoom;
  94.           -webkit-animation-duration: 0.6s;
  95.           animation-name: zoom;
  96.           animation-duration: 0.6s;
  97.         }
  98.         
  99.         @-webkit-keyframes zoom {
  100.           from {
  101.             -webkit-transform: scale(0)
  102.           }
  103.           to {
  104.             -webkit-transform: scale(1)
  105.           }
  106.         }
  107.         
  108.         @keyframes zoom {
  109.           from {
  110.             transform: scale(0)
  111.           }
  112.           to {
  113.             transform: scale(1)
  114.           }
  115.         }
  116.         /* The Close Button */
  117.         
  118.         .close {
  119.           position: absolute;
  120.           top: 15px;
  121.           right: 35px;
  122.           color: #f1f1f1;
  123.           font-size: 40px;
  124.           font-weight: bold;
  125.           transition: 0.3s;
  126.         }
  127.         
  128.         .close:hover,
  129.         .close:focus {
  130.           color: #bbb;
  131.           text-decoration: none;
  132.           cursor: pointer;
  133.         }
  134.         /* 100% Image Width on Smaller Screens */
  135.         
  136.         @media only screen and (max-width: 700px) {
  137.           .modal-content {
  138.             width: 100%;
  139.           }
  140.         }
  142. <!-- language: lang-html -->
  144.     <html>
  146.     <head>
  147.       <meta name="viewport" content="width=device-width, initial-scale=1">
  148.     </head>
  150.     <body>
  152.       <h2>Image Modal</h2>
  153.       <p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
  154.       <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.
  157.       <table id="table1" class="border-0" style="width: 100%;text-align: left;">
  158.         <thead class="border-0">
  159.           <tr class="text-dark">
  160.             <th style="width:10%;">
  161.               Data
  162.             </th>
  163.             <th style="width:80%;">
  164.               Explanation
  165.             </th>
  166.             <th style="width:1%;text-align:right;">
  167.               Image
  168.             </th>
  169.           </tr>
  170.         </thead>
  171.         <tbody>
  172.           <tr class="border-bottom">
  173.             <td>
  174.               Image
  175.             </td>
  176.             <td>
  177.               Some text
  178.             </td>
  179.             <td>
  180.               <img class="image" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
  181.             </td>
  182.           </tr>
  183.           <tr class="border-bottom">
  184.             <td>
  185.               Image
  186.             </td>
  187.             <td>
  188.               Some text
  189.             </td>
  190.             <td>
  191.               <img class="image" src="https://www.w3schools.com/howto/img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
  192.             </td>
  193.           </tr>
  194.         </tbody>
  195.       </table>
  196.       <!-- The Modal -->
  197.       <div id="myModal" class="modal">
  198.         <span id="close" class="close">&times;</span>
  199.         <img class="modal-content" id="modalImg">
  200.         <div id="caption"></div>
  201.       </div>
  202.     </body>
  204.     </html>
  206. <!-- end snippet -->

希望这对您有所帮助！

英文:

Just moved it in a table. Seems to work fine:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. // Get the modal
  2. var modal = document.getElementById(&quot;myModal&quot;);
  3. console.log(modal);
  4. // get the modal image
  5. var caption = document.getElementById(&quot;modalImg&quot;);
  6. // get the caption span
  7. var caption = document.getElementById(&quot;caption&quot;);
  8. // Get the &lt;span&gt; element that closes the modal
  9. var close = document.getElementById(&quot;close&quot;);
  10. // When the user clicks on &lt;span&gt; (x), close the modal
  11. close.onclick = function() {
  12. modal.style.display = &quot;none&quot;;
  13. }
  14. const images = document.getElementsByClassName(&#39;image&#39;);
  15. for (let image of images) {
  16. image.onclick = function(event) {
  17. image = event.target;
  18. modal.style.display = &quot;block&quot;;
  19. modalImg.src = image.src;
  20. caption.innertext = image.alt;
  21. }
  22. }

<!-- language: lang-css -->

  1. body {
  2. font-family: Arial, Helvetica, sans-serif;
  3. }
  4. .image {
  5. border-radius: 5px;
  6. cursor: pointer;
  7. transition: 0.3s;
  8. }
  9. .image:hover {
  10. opacity: 0.7;
  11. }
  12. /* The Modal (background) */
  13. .modal {
  14. display: none;
  15. /* Hidden by default */
  16. position: fixed;
  17. /* Stay in place */
  18. z-index: 1;
  19. /* Sit on top */
  20. padding-top: 100px;
  21. /* Location of the box */
  22. left: 0;
  23. top: 0;
  24. width: 100%;
  25. /* Full width */
  26. height: 100%;
  27. /* Full height */
  28. overflow: auto;
  29. /* Enable scroll if needed */
  30. background-color: rgb(0, 0, 0);
  31. /* Fallback color */
  32. background-color: rgba(0, 0, 0, 0.9);
  33. /* Black w/ opacity */
  34. }
  35. /* Modal Content (image) */
  36. .modal-content {
  37. margin: auto;
  38. display: block;
  39. width: 80%;
  40. max-width: 700px;
  41. }
  42. /* Caption of Modal Image */
  43. #caption {
  44. margin: auto;
  45. display: block;
  46. width: 80%;
  47. max-width: 700px;
  48. text-align: center;
  49. color: #ccc;
  50. padding: 10px 0;
  51. height: 150px;
  52. }
  53. /* Add Animation */
  54. .modal-content,
  55. #caption {
  56. -webkit-animation-name: zoom;
  57. -webkit-animation-duration: 0.6s;
  58. animation-name: zoom;
  59. animation-duration: 0.6s;
  60. }
  61. @-webkit-keyframes zoom {
  62. from {
  63. -webkit-transform: scale(0)
  64. }
  65. to {
  66. -webkit-transform: scale(1)
  67. }
  68. }
  69. @keyframes zoom {
  70. from {
  71. transform: scale(0)
  72. }
  73. to {
  74. transform: scale(1)
  75. }
  76. }
  77. /* The Close Button */
  78. .close {
  79. position: absolute;
  80. top: 15px;
  81. right: 35px;
  82. color: #f1f1f1;
  83. font-size: 40px;
  84. font-weight: bold;
  85. transition: 0.3s;
  86. }
  87. .close:hover,
  88. .close:focus {
  89. color: #bbb;
  90. text-decoration: none;
  91. cursor: pointer;
  92. }
  93. /* 100% Image Width on Smaller Screens */
  94. @media only screen and (max-width: 700px) {
  95. .modal-content {
  96. width: 100%;
  97. }
  98. }

<!-- language: lang-html -->

  1. &lt;html&gt;
  2. &lt;head&gt;
  3. &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  4. &lt;/head&gt;
  5. &lt;body&gt;
  6. &lt;h2&gt;Image Modal&lt;/h2&gt;
  7. &lt;p&gt;In this example, we use CSS to create a modal (dialog box) that is hidden by default.&lt;/p&gt;
  8. &lt;p&gt;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&#39;s &quot;alt&quot; attribute as an image caption text inside the modal.&lt;/p&gt;
  9. &lt;table id=&quot;table1&quot; class=&quot;border-0&quot; style=&quot;width: 100%;text-align: left;&quot;&gt;
  10. &lt;thead class=&quot;border-0&quot;&gt;
  11. &lt;tr class=&quot;text-dark&quot;&gt;
  12. &lt;th style=&quot;width:10%;&quot;&gt;
  13. Data
  14. &lt;/th&gt;
  15. &lt;th style=&quot;width:80%;&quot;&gt;
  16. Explaination
  17. &lt;/th&gt;
  18. &lt;th style=&quot;width:1%;text-align:right;&quot;&gt;
  19. Image
  20. &lt;/th&gt;
  21. &lt;/tr&gt;
  22. &lt;/thead&gt;
  23. &lt;tbody&gt;
  24. &lt;tr class=&quot;border-bottom&quot;&gt;
  25. &lt;td&gt;
  26. image
  27. &lt;/td&gt;
  28. &lt;td&gt;
  29. some text
  30. &lt;/td&gt;
  31. &lt;td&gt;
  32. &lt;img class=&quot;image&quot; src=&quot;https://www.w3schools.com/howto/img_snow.jpg&quot; alt=&quot;Snow&quot; style=&quot;width:100%;max-width:300px&quot;&gt;
  33. &lt;/td&gt;
  34. &lt;/tr&gt;
  35. &lt;tr class=&quot;border-bottom&quot;&gt;
  36. &lt;td&gt;
  37. image
  38. &lt;/td&gt;
  39. &lt;td&gt;
  40. some text
  41. &lt;/td&gt;
  42. &lt;td&gt;
  43. &lt;img class=&quot;image&quot; src=&quot;https://www.w3schools.com/howto/img_snow.jpg&quot; alt=&quot;Snow&quot; style=&quot;width:100%;max-width:300px&quot;&gt;
  44. &lt;/td&gt;
  45. &lt;/tr&gt;
  46. &lt;/tbody&gt;
  47. &lt;/table&gt;
  48. &lt;!-- The Modal --&gt;
  49. &lt;div id=&quot;myModal&quot; class=&quot;modal&quot;&gt;
  50. &lt;span id=&quot;close&quot; class=&quot;close&quot;&gt;&amp;times;&lt;/span&gt;
  51. &lt;img class=&quot;modal-content&quot; id=&quot;modalImg&quot;&gt;
  52. &lt;div id=&quot;caption&quot;&gt;&lt;/div&gt;
  53. &lt;/div&gt;
  54. &lt;/body&gt;
  55. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年4月4日 17:10:04
  • 转载请务必保留本文链接：https://go.coder-hub.com/75927523.html
  • html
  • javascript
  • jquery
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定