Hướng dẫn tạo Modal Images - Thêm CSS
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"> <!-- 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> </body> </html>
PHÓNG TO