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

DEMO

Modal Images cũng là một dạng của Modal box, chỉ khác là chúng sẽ hiển thị hình ảnh thay cho các nội dung trong modal. Việc sử dụng Modal Images rất phổ biến với các website tin tức, bán hàng. Các lập trình viên thường sử dụng chúng để hiển thị hình ảnh đầy đủ khi click vào một thumbnail nào đó trên trang.

Giải thích qua loa một chút, giờ chúng ta cùng tiến hành xây dựng một Modal Images đơn giản với HTML, CSS và Javascrip nhé.

1. Xây dựng giao diện

Việc đầu tiên là chúng ta cần tạo file chạy chính, các bạn tạo file index.html và tạo các thành phần của Modal Images bằng đoạn mã sau:

Code RUN
<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="./images/demo.jpg" alt="Trolltunga, Norway" width="300" height="200">
  <!-- The Modal -->
  <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>

Ở đây mình đặt tất cả các thành phần trong thẻ div có class="container" để dễ dạng định dạng cho toàn bộ các thành phần.

Tiếp đến các bạn cần chuẩn bị hình ảnh sẽ hiển thị, các bạn đặt tên hình ảnh là demo.jpg và đặt nó vào thư mục images cùng cấp với file index.html.

OK vậy là xong phần giao diện, chúng ta đến bước tiếp theo nhé.

2. Thêm CSS để định dạng các thành phần

Trong bước này chúng ta sẽ sử dụng CSS để định dạng cho các thành phần của trang, các bạn dán đoạn mã sau vào bên trong thẻ style:

Code RUN
.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;
}

Tất cả đều là các thuộc tính cơ bản trong CSS nên mình không giải thích nữa, các bạn chỉ cần lưu ý một điểm là chúng ta sẽ mặc định ẩn phần Modal đi với thuộc tính display: none;.

3. Thêm xử lý Javascript

Trong bước cuối cùng này, chúng ta sẽ sử dụng javascript để hiển thị Modal khi hình ảnh được click, các bạn thêm giúp mình đoạn mã script này vào sau thẻ body:

Code RUN
<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>

Đoạn mã này cũng rất đơn giản, nếu chưa hiểu rõ các bạn hãy đọc phần ghi chú mà mình đã viết để nắm được cách hoạt động của đoạn mã này.

Giờ chạy file index.html để xem thành quả nhé!

4. Lời kết

Như vậy, qua bài viết này mình đã cùng các bạn xây dựng thành công một Modal Image đơn giản, hi vọng rằng nó sẽ giúp đỡ các bạn phần nào trong quá trình xây dựng website của mình.

Nếu có bất cứ thắc mắc nào các bạn có thể để lại trong phần bình luận, hẹn gặp lại các bạn trong các bài viết tiếp theo trên freetuts.net.

Tham khảo: w3schools.com

Nguồn: freetuts.net

KHÓA HỌC ĐANG GIẢM GIÁ

FEDU - 30 – HTML CSS cơ bản

(Giảng viên: Nguyễn Đức Việt)

XEM
FEDU - 25 – Thiết kế hiệu ứng bằng Javascript và illustrator

(Giảng viên: NGUYỄN ĐỨC VIỆT )

XEM
FEDU - 03: Thành thạo lập trình jquery qua 20 bài tập thực hành

(Giảng viên: Nguyễn Đức Việt)

XEM
FEDU - 22 – Học tất tần tật về Javascript từ đầu

(Giảng viên: Nguyễn Đức Việt)

XEM
FEDU - 19: Học lập trình Back-end PHP/MySql/Jquery nâng cao

(Giảng viên: Nguyễn Đức Việt)

XEM