Trang chủ
Modal với target
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<!-- Nút mở modal link đến #modal --> <a href="#modal">Mở Modal</a> <!-- Modal với id modal --> <div id="modal" class="modal"> <div class="modal-content"> <!-- Nút đóng modal link về trang trước (đóng modal) --> <a href="#" class="close-btn">×</a> <h2>Tiêu đề Modal</h2> <p>Nội dung modal không dùng JavaScript.</p> </div> </div>
CSS
Copy
.modal { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; } .modal:target { display: flex; } .modal-content { background: white; padding: 20px 30px; border-radius: 6px; max-width: 400px; width: 90%; position: relative; } .close-btn { position: absolute; top: 10px; right: 15px; font-size: 24px; text-decoration: none; color: #888; } .close-btn:hover { color: #000; }
JS
Copy