CSS3 图片模态化

这是一个演示 CSS 和 JavaScript 如何协同工作的例子。

首先,请使用 CSS 创建模态窗口(对话框),并默认将其隐藏。

然后,当用户单击图片时,使用 JavaScript 显示模态窗口并在模态内部显示图片:

Northern Lights, Norway

代码如下:

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style>
  5. #myImg {
  6. border-radius: 5px;
  7. cursor: pointer;
  8. transition: 0.3s;
  9. }
  10. #myImg:hover {opacity: 0.7;}
  11. /* The Modal (background) */
  12. .modal {
  13. display: none; /* Hidden by default */
  14. position: fixed; /* Stay in place */
  15. z-index: 1; /* Sit on top */
  16. padding-top: 100px; /* Location of the box */
  17. left: 0;
  18. top: 0;
  19. width: 100%; /* Full width */
  20. height: 100%; /* Full height */
  21. overflow: auto; /* Enable scroll if needed */
  22. background-color: rgb(0,0,0); /* Fallback color */
  23. background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
  24. }
  25. /* Modal Content (image) */
  26. .modal-content {
  27. margin: auto;
  28. display: block;
  29. width: 80%;
  30. max-width: 700px;
  31. }
  32. /* Caption of Modal Image */
  33. #caption {
  34. margin: auto;
  35. display: block;
  36. width: 80%;
  37. max-width: 700px;
  38. text-align: center;
  39. color: #ccc;
  40. padding: 10px 0;
  41. height: 150px;
  42. }
  43. /* Add Animation */
  44. .modal-content, #caption {
  45. animation-name: zoom;
  46. animation-duration: 0.6s;
  47. }
  48. @keyframes zoom {
  49. from {transform: scale(0.1)}
  50. to {transform: scale(1)}
  51. }
  52. /* The Close Button */
  53. .close {
  54. position: absolute;
  55. top: 15px;
  56. right: 35px;
  57. color: #f1f1f1;
  58. font-size: 40px;
  59. font-weight: bold;
  60. transition: 0.3s;
  61. }
  62. .close:hover,
  63. .close:focus {
  64. color: #bbb;
  65. text-decoration: none;
  66. cursor: pointer;
  67. }
  68. /* 100% Image Width on Smaller Screens */
  69. @media only screen and (max-width: 700px){
  70. .modal-content {
  71. width: 100%;
  72. }
  73. }
  74. </style>
  75. </head>
  76. <body>
  77. <h2>Image Modal</h2>
  78. <p>在本例中,我们使用CSS创建一个默认隐藏的模式(对话框)</p>
  79. <p>我们使用JavaScript触发模态,并在单击模态时显示模态中的当前图像。还要注意的是,我们使用图像的“alt”属性中的值作为模态中的图像标题文本</p>
  80. <p>如果您不马上理解代码,请不要担心。使用完CSS后,请转到我们的JavaScript教程了解更多信息</p>
  81. <img id="myImg" src="/znadmin/md/1299/0.jpg" alt="Northern Lights, Norway" width="300" height="200">
  82. <!-- The Modal -->
  83. <div id="myModal" class="modal">
  84. <span class="close">&times;</span>
  85. <img class="modal-content" id="img01">
  86. <div id="caption"></div>
  87. </div>
  88. <script>
  89. // Get the modal
  90. var modal = document.getElementById('myModal');
  91. // Get the image and insert it inside the modal - use its "alt" text as a caption
  92. var img = document.getElementById('myImg');
  93. var modalImg = document.getElementById("img01");
  94. var captionText = document.getElementById("caption");
  95. img.onclick = function(){
  96. modal.style.display = "block";
  97. modalImg.src = this.src;
  98. captionText.innerHTML = this.alt;
  99. }
  100. // Get the <span> element that closes the modal
  101. var span = document.getElementsByClassName("close")[0];
  102. // When the user clicks on <span> (x), close the modal
  103. span.onclick = function() {
  104. modal.style.display = "none";
  105. }
  106. </script>
  107. </body>
  108. </html>

分类导航