NAPTheDev's Blog

Modal Box với CSS Only

February 28, 2022

Tìm hiểu cách tạo model box với chỉ html và css, không dùng javascript

Giới thiệu

Những element trong html như drawer, modal thông thường sẽ phải dùng javascript để có thể trigger những event để show modal, nhưng trong bài viết này mình sẽ hướng dẫn các bạn tạo một modal với css only tận dụng mẹo với checkbox

Bắt đầu code

Phần html


<!-- Div quan trọng để phân biệt các modal -->
<div>
<!-- Checkbox có id và name nhất định để có thể được trigger bởi các label -->
<input type="checkbox" class="modal-control" id="modal-1" name="modal-1" />
<!-- Button để mở modal, có thể thay bằng các phần tử khác -->
<label for="modal-1">Open modal</label>
<!-- Backdrop màu đen cho modal -->
<label for="modal-1" class="modal-background"></label>
<!-- Phần chính modal -->
<div class="modal">
<div class="modal-header">
<h3>Modal Title</h3>
<label for="modal-1" class="cursor-pointer squishy"> Close </label>
</div>
<div class="modal-content">
<p>lorem...</p>
</div>
</div>
</div>

Và CSS


.modal {
position: fixed;
width: 90vw;
max-width: 450px;
top: 50%;
left: 50%;
background: #fff;
z-index: 30;
border-radius: 5px;
overflow: hidden;
transform: scale(0) translate(-50%, -50%);
transition: 0.3s;
transform-origin: top left;
opacity: 0;
visibility: hidden;
}
/* Hide checkbox */
.modal-control {
display: none;
}
/* Chọn .modal-background ở cùng cấp độ (cùng parent) với checkbox */
.modal-control:checked ~ .modal-background {
opacity: 1;
visibility: visible;
}
/* Chọn .modal ở cùng cấp độ (cùng parent) với checkbox */
.modal-control:checked ~ .modal {
opacity: 1;
visibility: visible;
transform: scale(1) translate(-50%, -50%);
}
.modal-background {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 20;
background: #00000080;
transition: 0.3s;
opacity: 0;
visibility: hidden;
}
/* Style phần body của modal, có thể tuỳ chỉnh theo ý thích */
.modal-header {
padding: 13px 20px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #d3d3d3;
}
.modal-content {
padding: 13px 20px;
}

Kết luận

Và đó là cách tạo modal box với chỉ html và css, không sử dụng javascript. Chúc các bạn thành công.
Thành quả: Codepen

Bình luận

Bài viết liên quan

NAPTheDev • © 2022 My Portfolio