Chào các bạn!!! Cũng lâu rồi Wolfactive không ra bài mới nhỉ? Thì với hôm nay bên quay lại với bài viết hướng dẫn các bạn tạo cách tạo modal đơn giản mà không cần dùng bất kỳ thư viện này.
1. Xây dựng khung sườn HTML
Trước tiên chúng ta cần định hình Modal của chúng ta sẽ như thế nào ? Thì mình xin chụp một ví dụ sau để mình và các bạn có mẫu để làm theo
Mình sẽ có phần cấu trúc html như sau:
<div class="modal form-register">
<div class="modal__contain container flip-in-ver-right"><div class="modal__close">
<i class="fas fa-times"></i>
</div>
<div class="modal__content">
<div class="carousel__form">
<div class="carousel__form-item">
<label for="partnerFormName"> Your brand name* </label>
<input id="partnerFormName" type="text" class="input carousel__input">
<p class="d--none" id="partnerFormNameVal">Please fill out the form (*)</p>
</div>
<div class="carousel__form-item">
<label for="partnerFormWeb"> Website/Fanpage* </label>
<input id="partnerFormWeb" type="text" class="input carousel__input">
<p class="d--none" id="partnerFormWebVal">Please fill out the form (*)</p>
</div>
<div class="carousel__form-item">
<label for="partnerFormRep"> Representative* </label>
<input id="partnerFormRep" type="text" class="input carousel__input">
<p class="d--none" id="partnerFormRepVal"> Please fill out the form (*)</p>
</div>
<div class="carousel__form-item">
<label for="partnerFormEmail"> Email* </label>
<input id="partnerFormEmail" type="text" class="input carousel__input">
<p class="d--none" id="partnerFormEmailVal">Please fill out the form (*)</p>
</div>
<div class="carousel__form-item">
<label for="partnerFormPhone"> Phone* </label>
<input id="partnerFormPhone" type="text" class="input carousel__input">
<p class="d--none" id="partnerFormPhoneVal">Please fill out the form (*)</p>
</div>
<div class="carousel__form-item">
<div class="carousel__btn text--right">
<button class="btn" aria-label="partner-form-submit-button"> Register </button>
</div>
</div>
</div>
</div>
</div>
</div>Mình tiến hành phân tích modal này nhé.
<div class="modal modal--form-partner form-register" >
<div class="modal__contain container flip-in-ver-right"><div class="modal__close">
<i class="fas fa-times"></i>
</div>
<div class="modal__content">
<!---- Phần nội dụng modal sẽ ở đây ---->
</div>
</div>
</div>
</div>Như các bạn đã thấy thì trong modal được chia thành 2 phần là button tắt modal và nội dụng modal. Phần cấu trúc cũng giống như modal của bootstrap. Sau đây các bạn cùng mình tiến hành công việc css nhé.
2. Style giao diện với CSS
Sau đây là phần css giao diện cho modal
.modal {
display: none;
position: fixed;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(51,51,51,.301);
z-index: 100;
}
.modal .modal__contain {
position: relative;
}
.flip-in-ver-right{
-webkit-animation: flip-in-ver-right .5s cubic-bezier(.25,.46,.45,.94) .3s both;
animation: flip-in-ver-right .5s cubic-bezier(.25,.46,.45,.94) .3s both;
}
.modal .modal__contain .modal__close {
position: absolute;
top: -15px;
right: -15px;
color: #fff;
width: 30px;
height: 30px;
background: #a60505;
-webkit-transition: color .15s ease-in;
transition: color .15s ease-in;
font-size: 20px;
text-align: center;
line-height: 30px;
}
.modal .modal__contain .modal__content {
padding: 30px;
background: #4b4849;
width: 500px;
}
@-webkit-keyframes flip-in-ver-right {
0% {
-webkit-transform: rotateY(-80deg);
transform: rotateY(-80deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
@keyframes flip-in-ver-right {
0% {
-webkit-transform: rotateY(-80deg);
transform: rotateY(-80deg);
opacity: 0;
}
100% {
-webkit-transform: rotateY(0);
transform: rotateY(0);
opacity: 1;
}
}
Phần css mình chỉ ghi các phần style cần thiết cho modal còn nội dụng bên trong sẽ không có các bạn sẽ phải tự css vào nhé. Ở đây mình cho display none modal để không cho modal hiện khi chưa kích hoạt. Sau khi modal được bật lên thì các bạn sẽ thấy một nền background đen mờ phái sau modal. Nó là phần này
.modal {background: rgba(51,51,51,.301)}Sau đó canh cho phần modal container sẽ vào giữa modal và modal sẽ full màn hình
.modal {
display: none;
position: fixed;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
}Còn lại là animation lúc bật modal và style cho button close và modal content bên trong
3. Tắt mở modal với JavaScript
Tiếp theo là phần bật tắt modal. Trong phần này mình sẽ hướng dẫn các bạn viết JavaScript để tắt mở modal. Việc đầu tiên là các bạn cần DOM tới button mở modal, modal, button đóng modal.
let modalOpenButton = document.querySelector('.button--open')
// ở đây các bạn có thể điền class hoặc ID của button open modal
let modal = document.querySelector('.modal.form-register')
/* Ở đây các bạn có thể điền class của modal hoặc ID của modal
phần này mình DOM theo cấu trúc HTML của mình */
let modalCloseButton = document.querySelector('.modal.form-register .modal__close');
// ở đây các bạn có thể điền class hoặc ID của button close modal
let bodyDOM = document.querySelector('body');
// DOM body để chặn không cho browser scroll khi modal được bật
/* Sau đó check điều kiện để không bị lỗi khi không có các element trên*/
const openModal = () => {
modal.style.display = "flex";
bodyDOM.style.overflowY = "hidden";
}
const closeModal = () => {
modal.style.display = none;
bodyDOM.style.overflowY = "unset";
}
if(modal && modalCloseButton && modalOpenButton ){
modalOpenButton.onclick = openModal;
modalCloseButton.onclick = closeModal;
window.onclick = (event) =>{
if(event.target === modal){
closeModal();
// khi click ngoài nền đen thì modal sẽ tự tắt
}
}
}Ngoài ra nếu các bạn không thích để trong vòng if như mình các bạn có thể để trong hàm check sự kiện sau của JavaScript
window.addEventListener('DOMContentLoaded', (event) => {
/*Code here*/
});4. Tổng kết
Vậy là qua bài viết này mình đã hướng dẫn các bạn làm xong cách tạo modal mà không cần sử dụng bất kỳ thư viện nào khác. Hi vọng bài viết này sẽ giúp ích các bạn trong thời gian tới