Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm array.slice() trong Javascript 
Tính tổng hai số bằng Javascript (cộng hai số) 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Hướng dẫn tạo Modal Images
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:
<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">×</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.
Bài viết này được đăng tại [free tuts .net]
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:
.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:
<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
