Link demo: http://chuyenlaptrinh.net/pages/popupimage/
Hiệu ứng này có thể bạn đã thấy ở 1 số website rồi nhỉ. Các bước tạo hiệu ứng Popup hiển thị hình ảnh này như sau.
Bước 1: Thêm class popupImage vào các hình ảnh muốn hiện popup khi người dùng click vào.
Ví dụ:
<ul>
<li><img class="popupImage" width="600px" height="auto" alt="Image 1" src="image1.jpg" /></li>
<li><img class="popupImage" width="600px" height="auto" alt="Image 2" src="image2.jpg" /></li>
<li><img class="popupImage" width="600px" height="auto" alt="Image 3" src="image3.jpg" /></li>
</ul>
Bước 2: Dán thêm đoạn HTML hiển thị popup sau vào thẻ body.
<!-- The Modal -->
<div id="modalShowImage" class="modal-Image">
<!-- The Close Button -->
<span class="close">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="img01">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
Bước 3: Tạo file popupImage.css với nội dung như sau:
/* Style the Image Used to Trigger the Modal */
.popupImage {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
} .popupImage:hover {opacity: 0.7;} /* The Modal (background) */
.modal-Image {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 9999; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
} /* Modal Content (Image) */
.modal-Image .modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
} /* Caption of Modal Image (Image Text) - Same Width as the Image */
.modal-Image #caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
} /* Add Animation - Zoom in the Modal */
.modal-Image .modal-content, .modal-Image #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
} @-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
} @keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
} /* The Close Button */
.modal-Image .close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
} .modal-Image .close:hover,
.modal-Image .close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
} /* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-Image .modal-content {
width: 100%;
}
}
Bước 4: Khai báo file css vào trong thẻ head.
<link rel="stylesheet" href="popupImage.css" type="text/css" />
Bước 3: Khai báo thư viện jquery và đoạn script sau vào thẻ head hoặc cuối thẻ <body>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" ></script>
<script>
$(function(){
// Event khi người dùng click vào hình ảnh có class popupImage
$(".popupImage").click(function(){
var modal = document.getElementById("modalShowImage"); // Tạo biến modal lấy ra element có Id modalShowImage
var captionText = document.getElementById("caption"); // Tạo biến captionText lấy ra từ element có Id caption
var modalImg = document.getElementById("img01"); // Tạo biến modalImg lấy ra từ element có Id img01
modal.style.display = "block"; // Hiển thị popup
modalImg.src = $(this).attr("src"); // Gán thuộc tính src của hình ảnh trong popup
captionText.innerHTML = $(this).attr("alt"); // Gán giá trị cho caption theo thuộc tính alt của hình
});
// Event khi người dùng click nút Close popup
$(".modal-Image .close").click(function(){
var modal = document.getElementById("modalShowImage");
modal.style.display = 'none'; // Ẩn popup
});
});
</script>
EmoticonEmoticon