Trang chủ
Modal không JS (Checkbox)
Save
Settings
Sign Up
Log In
Save
Settings
HTML
Copy
<!-- Checkbox để toggle modal --> <input type="checkbox" id="modal-toggle" /> <!-- Nút mở modal --> <label for="modal-toggle">Mở Modal</label> <!-- Modal --> <div class="modal"> <div class="modal-content"> <!-- Nút đóng modal cũng là label, bấm vào sẽ bỏ checked checkbox --> <label for="modal-toggle" class="modal-close">×</label> <h2>Tiêu đề Modal</h2> <p>Nội dung modal không cần JavaScript.</p> </div> </div>
CSS
Copy
#modal-toggle { display: none; } /* Nút mở modal */ label[for="modal-toggle"] { padding: 10px 20px; background: #3498db; color: white; cursor: pointer; border-radius: 4px; display: inline-block; } /* Modal nền ẩn mặc định */ .modal { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); display: none; justify-content: center; align-items: center; } /* Modal nội dung */ .modal-content { background: white; padding: 20px 30px; border-radius: 6px; max-width: 400px; width: 90%; position: relative; } /* Khi checkbox được checked - show modal */ #modal-toggle:checked ~ .modal { display: flex; } /* Nút đóng modal */ .modal-close { position: absolute; top: 10px; right: 15px; font-size: 24px; cursor: pointer; color: #888; } .modal-close:hover { color: #000; }
JS
Copy