Live Code Editor Version 2.0

Hướng dẫn tạo Modal Images - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
          .container{
            width: 500px;
            margin: auto;
            text-align: center;
          }
          #myImg {
              border-radius: 5px;
              cursor: pointer;
              transition: 0.3s;
          }

#myImg:hover {opacity: 0.7;}

/* định dạng phần nền của modal */
          .modal {
              display: none; /* mặc định được ẩn đi */
              position: fixed; /* vị trí được cố định */
              z-index: 1; /* ưu tiên hiển thị đầu tiên */
              padding-top: 100px; 
              left: 0;
              top: 0;
              width: 100%; 
              height: 100%; 
              background-color: rgb(0,0,0); 
              background-color: rgba(0,0,0,0.9); 
          }

/* Phần nội hình ảnh của modal */
          .modal-content {
              margin: auto;
              display: block;
              width: 80%;
              max-width: 700px;
          }

/* phần caption của modal image */
          #caption {
              margin: auto;
              display: block;
              width: 80%;
              max-width: 700px;
              text-align: center;
              color: #ccc;
              padding: 10px 0;
              height: 150px;
          }

/* Hiệu ứng chuyển động*/
          .modal-content, #caption {    
              -webkit-animation-name: zoom;
              -webkit-animation-duration: 0.6s;
              animation-name: zoom;
              animation-duration: 0.6s;
          }

/* Button đóng Modal */
          .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;
          }
        </style>
    </head>
    <body> 
      <div class="container">
        <h2>Freetuts.net hướng dẫn tạo Modal Image</h2>
        <p>Các bạn click vào hình ảnh để mở Modal!</p>
        <img id="myImg" src="https://freetuts.net/upload/tut_post/images/2017/07/30/965/demo.jpg"
         alt="Trolltunga, Norway" width="300" height="200">
        
        <div id="myModal" class="modal">
          <span class="close">&times;</span>
          <img class="modal-content" id="img01">
          <div id="caption">
            Lamborghini thường tạo ra những chiếc xe đặc biệt nhân dịp
            kỷ niệm của hãng. Centenario giới hạn 40 chiếc lên tới 1,9 triệu USD
           </div>
        </div>
      </div>
    </body>
    <script>
      // Lấy phần Modal
      var modal = document.getElementById('myModal');

// Lấy đường dẫn của hình ảnh và gán vào trong phần Modal
      var img = document.getElementById('myImg');
      var modalImg = document.getElementById("img01");
      img.onclick = function(){
          modal.style.display = "block";
          modalImg.src = this.src;
      }

// lấy button span có chức năng đóng Modal
      var span = document.getElementsByClassName("close")[0];

//Khi button được click, đóng modal
      span.onclick = function() { 
          modal.style.display = "none";
      }
    </script>
</html>