hướng dẫn Mẹo Hay Cách Modal HTML Bootstrap modal Modal CSS Modal Bootstrap 5 Html5 modal popup Code tạo popup

Hướng dẫn cách đưa modal box vào html

Trong bài viết lần này, mình sẽ hướng dẫn sơ lượt các bạn về cách xây dựng component modal gần giống với Bootstrap 4. Chủ đích của bài này sẽ giúp bạn hiểu thêm về cách sử dụng javascript tương tác với html. Ngoài ra cũng giúp bạn luyện thêm kỹ năng kết hợp bộ 3 html/css/js.

Lưu ý rằng: Bài viết này chỉ hướng dẫn bạn cấu trúc xây dựng Modal và có tính tái sử dụng nó chứ không có thiên hướng xây dựng CSS đẹp mắt.

Xây dựng cấu trúc HTML

Đầu tiên, chúng ta cần phải xây dựng cấu trúc 

  
  
  
  
  
    
  
      
Header modal
  
    
      
    
  
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
    
      
    
  
      
Cancel

0 trước khi triển khai đến CSS / JavaScript.

Chúng ta sẽ bắt đầu từ button bật 

  
  
  
  
  
    
  
      
Header modal
  
    
      
    
  
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
    
      
    
  
      
Cancel

1. Hình thức xây dựng theo để tái sử dụng mã JavaScript, chúng ta sẽ không viết một đoạn mã cho duy nhất một Modal, thay vào đó sẽ xây dựng cấu trúc mã để tái sử dụng cho 

  
  
  
  
  
    
  
      
Header modal
  
    
      
    
  
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
    
      
    
  
      
Cancel

2 Modal mà không phải lặp lại mã JavaScript.

Kết hợp data-* và aria-* chúng ta có thể truy xuất được modal và trạng thái bật tắt của nó.

  • data-trigger='modal' : Đoạn này có nghĩa giúp bạn định danh được thẻ 

      
  
    Header modal
      

      

      
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      

      

      
  
    Cancel

    3 nào dùng để truy xuất, tương tác với Modal
  • data-target='id_or_class_selector': Đoạn này sẽ là thuộc tính ID hoặc class cho phép chúng ta truy xuất đến Modal đó.
  • aria-open='false': Đây là trạng thái bật tắt mặc định của Modal.

Modal 1

Xem như đã hoàn thành xong button để bật modal lên, bây giờ chúng ta cần Modal được taget thông qua thuộc tính 

  
  
  
  
  
    
  
      
Header modal
  
    
      
    
  
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
    
      
    
  
      
Cancel

4. 

  
  
  
  
  
    
  
      
Header modal
  
    
      
    
  
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
    
      
    
  
      
Cancel

Bây giờ, hãy cùng thêm một chút CSS [Mình dùng SCSS, cách viết nested css] cho ra dáng Modal chút. 

  • {  
  box-sizing: border-box;  
  padding: 0;  
  margin: 0;  
}
body {  
  line-height: 1.5;  
}
.modal {  
  position: fixed;  
  width: 100%;  
  height: 100%;  
  top: 0;  
  left: 0;  
  z-index: 10;  
  visibility: hidden;  
  opacity: 0;  
  transition: all 300ms linear;  
  .modal__backdrop {  
    position: absolute;  
    top: 0;  
    left: 0;  
    background-color: rgba[0, 0, 0, 0.8];  
    width: 100%;  
    height: 100%;  
    z-index: -1;  
  }  
  .modal__content {  
    transition: all 300ms ease-in-out;  
    width: 30%;  
    margin: auto;  
    z-index: 10;  
    position: absolute;  
    top: -100%;  
    left: 50%;  
    transform: translateX[-50%];  
    background: white;  
    padding: 15px 30px;  
    border-radius: 5px;  
    .modal__header {  
      border-bottom: 1px solid gray;  
      margin-bottom: 15px;  
    }  
    .modal__main {  
      margin-bottom: 15px;  
    }  
    .modal__footer {  
      display: flex;  
      align-items: center;  
      justify-content: flex-end;  
      & > * {  
        margin-left: 15px;  
        cursor: pointer;  
      }  
    }  
  }  
  &--active {  
    opacity: 1;  
    visibility: visible;  
    .modal__content {  
      top: 25%;  
    }  
  }  
}



  •   
  
    Header modal
      

      

      
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      

      

      
  
    Cancel

    5: Modal khi bật lên, sẽ ngăn chặn người dùng tương tác với nội dung bên dưới, vì vậy chúng ta phải cho modal có thuộc tính 

      
  
    Header modal
      

      

      
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      

      

      
  
    Cancel

    6 để đè lên nội dung bên dưới

  •   
  
    Header modal
      

      

      
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      

      

      
  
    Cancel

    7: Làm nhiệm vụ tạo một lớp backdrop mờ đục, che mờ đi phần bên dưới để tạo điểm tập trung cho nội dung hiển thị trên Modal và ngăn chặn việc người dùng tương tác được với nội dung phía dưới

  •   
  
    Header modal
      

      

      
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      

      

      
  
    Cancel

    8: Modal thường sẽ nằm giữa trang, vì vậy ta cần thêm 

      
  
    Header modal
      

      

      
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      

      

      
  
    Cancel

    9 để canh giữa Modal, ngoài ra khi hiển thị cũng cần một chút hiệu ứng nên ta sẽ kết hợp thêm

    `
  • {

    box-sizing: border-box; padding: 0; margin: 0; } body { line-height: 1.5; } .modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; visibility: hidden; opacity: 0; transition: all 300ms linear; .modal__backdrop { 

    position: absolute;  
top: 0;  
left: 0;  
background-color: rgba[0, 0, 0, 0.8];  
width: 100%;  
height: 100%;  
z-index: -1;
    } .modal__content { 
    transition: all 300ms ease-in-out;  
width: 30%;  
margin: auto;  
z-index: 10;  
position: absolute;  
top: -100%;  
left: 50%;  
transform: translateX[-50%];  
background: white;  
padding: 15px 30px;  
border-radius: 5px;  
.modal__header {  
  border-bottom: 1px solid gray;  
  margin-bottom: 15px;  
}  
.modal__main {  
  margin-bottom: 15px;  
}  
.modal__footer {  
  display: flex;  
  align-items: center;  
  justify-content: flex-end;  
  & > * {  
    margin-left: 15px;  
    cursor: pointer;  
  }  
}
    } &--active { 
    opacity: 1;  
visibility: visible;  
.modal__content {  
  top: 25%;  
}
    } }

    ` 0 để tạo cảm giác không bị cứng.
  • `
  • {

    box-sizing: border-box; padding: 0; margin: 0; } body { line-height: 1.5; } .modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; visibility: hidden; opacity: 0; transition: all 300ms linear; .modal__backdrop { 

    position: absolute;  
top: 0;  
left: 0;  
background-color: rgba[0, 0, 0, 0.8];  
width: 100%;  
height: 100%;  
z-index: -1;
    } .modal__content { 
    transition: all 300ms ease-in-out;  
width: 30%;  
margin: auto;  
z-index: 10;  
position: absolute;  
top: -100%;  
left: 50%;  
transform: translateX[-50%];  
background: white;  
padding: 15px 30px;  
border-radius: 5px;  
.modal__header {  
  border-bottom: 1px solid gray;  
  margin-bottom: 15px;  
}  
.modal__main {  
  margin-bottom: 15px;  
}  
.modal__footer {  
  display: flex;  
  align-items: center;  
  justify-content: flex-end;  
  & > * {  
    margin-left: 15px;  
    cursor: pointer;  
  }  
}
    } &--active { 
    opacity: 1;  
visibility: visible;  
.modal__content {  
  top: 25%;  
}
    } }

    ` 1: Chúng ta sẽ dùng nó để kích hoạt trạng thái bật / tắt của Modal.
  • Các phần css còn lại bạn có thể tuỳ ý xây dựng để giúp nó đẹp hơn

Thêm JavaScript để xử lý trạng thái Modal

Dựa theo mẫu HTML bên dưới, chúng ta sẽ dùng 

  • {  
  box-sizing: border-box;  
  padding: 0;  
  margin: 0;  
}
body {  
  line-height: 1.5;  
}
.modal {  
  position: fixed;  
  width: 100%;  
  height: 100%;  
  top: 0;  
  left: 0;  
  z-index: 10;  
  visibility: hidden;  
  opacity: 0;  
  transition: all 300ms linear;  
  .modal__backdrop {  
    position: absolute;  
    top: 0;  
    left: 0;  
    background-color: rgba[0, 0, 0, 0.8];  
    width: 100%;  
    height: 100%;  
    z-index: -1;  
  }  
  .modal__content {  
    transition: all 300ms ease-in-out;  
    width: 30%;  
    margin: auto;  
    z-index: 10;  
    position: absolute;  
    top: -100%;  
    left: 50%;  
    transform: translateX[-50%];  
    background: white;  
    padding: 15px 30px;  
    border-radius: 5px;  
    .modal__header {  
      border-bottom: 1px solid gray;  
      margin-bottom: 15px;  
    }  
    .modal__main {  
      margin-bottom: 15px;  
    }  
    .modal__footer {  
      display: flex;  
      align-items: center;  
      justify-content: flex-end;  
      & > * {  
        margin-left: 15px;  
        cursor: pointer;  
      }  
    }  
  }  
  &--active {  
    opacity: 1;  
    visibility: visible;  
    .modal__content {  
      top: 25%;  
    }  
  }  
}

2 để truy vấn những thẻ có thuộc tính data-trigger='modal' 

Modal 1

Tương ứng, trong JavaScript, chúng ta có 

// data-trigger: "modal" => Dựa vào trigger selector tất cả những thẻ nào có data-trigger='modal'  
// data-target: Mỗi một data-trigger sẽ select đến một bộ modal riêng [Phù hợp cho việc tái sử dụng]  
// aria-open: Khai báo trạng thái modal  
const btnModals = document.querySelectorAll["[data-trigger='modal']"];

Sau khi đã lấy được nhóm các nút 

  • {  
  box-sizing: border-box;  
  padding: 0;  
  margin: 0;  
}
body {  
  line-height: 1.5;  
}
.modal {  
  position: fixed;  
  width: 100%;  
  height: 100%;  
  top: 0;  
  left: 0;  
  z-index: 10;  
  visibility: hidden;  
  opacity: 0;  
  transition: all 300ms linear;  
  .modal__backdrop {  
    position: absolute;  
    top: 0;  
    left: 0;  
    background-color: rgba[0, 0, 0, 0.8];  
    width: 100%;  
    height: 100%;  
    z-index: -1;  
  }  
  .modal__content {  
    transition: all 300ms ease-in-out;  
    width: 30%;  
    margin: auto;  
    z-index: 10;  
    position: absolute;  
    top: -100%;  
    left: 50%;  
    transform: translateX[-50%];  
    background: white;  
    padding: 15px 30px;  
    border-radius: 5px;  
    .modal__header {  
      border-bottom: 1px solid gray;  
      margin-bottom: 15px;  
    }  
    .modal__main {  
      margin-bottom: 15px;  
    }  
    .modal__footer {  
      display: flex;  
      align-items: center;  
      justify-content: flex-end;  
      & > * {  
        margin-left: 15px;  
        cursor: pointer;  
      }  
    }  
  }  
  &--active {  
    opacity: 1;  
    visibility: visible;  
    .modal__content {  
      top: 25%;  
    }  
  }  
}

3, tiếp theo chúng ta cần lặp qua mảng NodeList đó 

btnModals.forEach[btnModal => {}]

Việc cần làm tiếp theo

  • Gán sự kiện `
  • {

    box-sizing: border-box; padding: 0; margin: 0; } body { line-height: 1.5; } .modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; visibility: hidden; opacity: 0; transition: all 300ms linear; .modal__backdrop { 

    position: absolute;  
top: 0;  
left: 0;  
background-color: rgba[0, 0, 0, 0.8];  
width: 100%;  
height: 100%;  
z-index: -1;
    } .modal__content { 
    transition: all 300ms ease-in-out;  
width: 30%;  
margin: auto;  
z-index: 10;  
position: absolute;  
top: -100%;  
left: 50%;  
transform: translateX[-50%];  
background: white;  
padding: 15px 30px;  
border-radius: 5px;  
.modal__header {  
  border-bottom: 1px solid gray;  
  margin-bottom: 15px;  
}  
.modal__main {  
  margin-bottom: 15px;  
}  
.modal__footer {  
  display: flex;  
  align-items: center;  
  justify-content: flex-end;  
  & > * {  
    margin-left: 15px;  
    cursor: pointer;  
  }  
}
    } &--active { 
    opacity: 1;  
visibility: visible;  
.modal__content {  
  top: 25%;  
}
    } }

    4 thông qua thuộc tính

  • {

    box-sizing: border-box; padding: 0; margin: 0; } body { line-height: 1.5; } .modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; visibility: hidden; opacity: 0; transition: all 300ms linear; .modal__backdrop { 

    position: absolute;  
top: 0;  
left: 0;  
background-color: rgba[0, 0, 0, 0.8];  
width: 100%;  
height: 100%;  
z-index: -1;
    } .modal__content { 
    transition: all 300ms ease-in-out;  
width: 30%;  
margin: auto;  
z-index: 10;  
position: absolute;  
top: -100%;  
left: 50%;  
transform: translateX[-50%];  
background: white;  
padding: 15px 30px;  
border-radius: 5px;  
.modal__header {  
  border-bottom: 1px solid gray;  
  margin-bottom: 15px;  
}  
.modal__main {  
  margin-bottom: 15px;  
}  
.modal__footer {  
  display: flex;  
  align-items: center;  
  justify-content: flex-end;  
  & > * {  
    margin-left: 15px;  
    cursor: pointer;  
  }  
}
    } &--active { 
    opacity: 1;  
visibility: visible;  
.modal__content {  
  top: 25%;  
}
    } }

    ` 5 cho các nút.
  • Selector đến Modal qua `
  • {

    box-sizing: border-box; padding: 0; margin: 0; } body { line-height: 1.5; } .modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; visibility: hidden; opacity: 0; transition: all 300ms linear; .modal__backdrop { 

    position: absolute;  
top: 0;  
left: 0;  
background-color: rgba[0, 0, 0, 0.8];  
width: 100%;  
height: 100%;  
z-index: -1;
    } .modal__content { 
    transition: all 300ms ease-in-out;  
width: 30%;  
margin: auto;  
z-index: 10;  
position: absolute;  
top: -100%;  
left: 50%;  
transform: translateX[-50%];  
background: white;  
padding: 15px 30px;  
border-radius: 5px;  
.modal__header {  
  border-bottom: 1px solid gray;  
  margin-bottom: 15px;  
}  
.modal__main {  
  margin-bottom: 15px;  
}  
.modal__footer {  
  display: flex;  
  align-items: center;  
  justify-content: flex-end;  
  & > * {  
    margin-left: 15px;  
    cursor: pointer;  
  }  
}
    } &--active { 
    opacity: 1;  
visibility: visible;  
.modal__content {  
  top: 25%;  
}
    } }

    ` 6
  • Lấy trạng thái bật/ tắt mặc định qua `
  • {

    box-sizing: border-box; padding: 0; margin: 0; } body { line-height: 1.5; } .modal { position: fixed; width: 100%; height: 100%; top: 0; left: 0; z-index: 10; visibility: hidden; opacity: 0; transition: all 300ms linear; .modal__backdrop { 

    position: absolute;  
top: 0;  
left: 0;  
background-color: rgba[0, 0, 0, 0.8];  
width: 100%;  
height: 100%;  
z-index: -1;
    } .modal__content { 
    transition: all 300ms ease-in-out;  
width: 30%;  
margin: auto;  
z-index: 10;  
position: absolute;  
top: -100%;  
left: 50%;  
transform: translateX[-50%];  
background: white;  
padding: 15px 30px;  
border-radius: 5px;  
.modal__header {  
  border-bottom: 1px solid gray;  
  margin-bottom: 15px;  
}  
.modal__main {  
  margin-bottom: 15px;  
}  
.modal__footer {  
  display: flex;  
  align-items: center;  
  justify-content: flex-end;  
  & > * {  
    margin-left: 15px;  
    cursor: pointer;  
  }  
}
    } &--active { 
    opacity: 1;  
visibility: visible;  
.modal__content {  
  top: 25%;  
}
    } }

    ` 7

// Dựa vào data-trigger='modal' truy xuất toàn bộ nút bật modal  
btnModals.forEach[btnModal => {  
  // lấy thông tin modal  
  const modal = document.querySelector[btnModal.getAttribute["data-target"]];  
  // lấy trạng thái modal  
  const open = btnModal.getAttribute["aria-open"] === "true" ? true : false;  
  // Khởi động trạng thái mặc định của modal được set từ aria-open của button  
  onActiveOrNot[btnModal, modal, open];  
  // Bật modal thông qua button  
  btnModal.addEventListener["click", [] => {  
    onActiveOrNot[btnModal, modal, !open];  
  }];
  // Tắt modal thông qua nút close  
  modal.querySelector[".modal__cancel"].addEventListener["click", [] => {  
    onActiveOrNot[btnModal, modal, !open];  
  }]  
}]

Ấy mà function 

  • {  
  box-sizing: border-box;  
  padding: 0;  
  margin: 0;  
}
body {  
  line-height: 1.5;  
}
.modal {  
  position: fixed;  
  width: 100%;  
  height: 100%;  
  top: 0;  
  left: 0;  
  z-index: 10;  
  visibility: hidden;  
  opacity: 0;  
  transition: all 300ms linear;  
  .modal__backdrop {  
    position: absolute;  
    top: 0;  
    left: 0;  
    background-color: rgba[0, 0, 0, 0.8];  
    width: 100%;  
    height: 100%;  
    z-index: -1;  
  }  
  .modal__content {  
    transition: all 300ms ease-in-out;  
    width: 30%;  
    margin: auto;  
    z-index: 10;  
    position: absolute;  
    top: -100%;  
    left: 50%;  
    transform: translateX[-50%];  
    background: white;  
    padding: 15px 30px;  
    border-radius: 5px;  
    .modal__header {  
      border-bottom: 1px solid gray;  
      margin-bottom: 15px;  
    }  
    .modal__main {  
      margin-bottom: 15px;  
    }  
    .modal__footer {  
      display: flex;  
      align-items: center;  
      justify-content: flex-end;  
      & > * {  
        margin-left: 15px;  
        cursor: pointer;  
      }  
    }  
  }  
  &--active {  
    opacity: 1;  
    visibility: visible;  
    .modal__content {  
      top: 25%;  
    }  
  }  
}

8 là gì ta. Để không quá rườm rà, đây sẽ là hàm thực hiện thêm / xoá 

  • {  
  box-sizing: border-box;  
  padding: 0;  
  margin: 0;  
}
body {  
  line-height: 1.5;  
}
.modal {  
  position: fixed;  
  width: 100%;  
  height: 100%;  
  top: 0;  
  left: 0;  
  z-index: 10;  
  visibility: hidden;  
  opacity: 0;  
  transition: all 300ms linear;  
  .modal__backdrop {  
    position: absolute;  
    top: 0;  
    left: 0;  
    background-color: rgba[0, 0, 0, 0.8];  
    width: 100%;  
    height: 100%;  
    z-index: -1;  
  }  
  .modal__content {  
    transition: all 300ms ease-in-out;  
    width: 30%;  
    margin: auto;  
    z-index: 10;  
    position: absolute;  
    top: -100%;  
    left: 50%;  
    transform: translateX[-50%];  
    background: white;  
    padding: 15px 30px;  
    border-radius: 5px;  
    .modal__header {  
      border-bottom: 1px solid gray;  
      margin-bottom: 15px;  
    }  
    .modal__main {  
      margin-bottom: 15px;  
    }  
    .modal__footer {  
      display: flex;  
      align-items: center;  
      justify-content: flex-end;  
      & > * {  
        margin-left: 15px;  
        cursor: pointer;  
      }  
    }  
  }  
  &--active {  
    opacity: 1;  
    visibility: visible;  
    .modal__content {  
      top: 25%;  
    }  
  }  
}

1 dựa vào các sự kiện bên trên, nhận vào 3 tham số.

  • Modal 1

    0: Nút để trỏ đến Modal hiện tại

  •   
  
    Header modal
      

      

      
  
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      

      

      
  
    Cancel

    1: Nội dung Modal

  • Modal 1

    2: Trạng thái bật / tắt

// Hàm xử lý bật, tắt modal thông qua class cung cấp  
function onActiveOrNot[buttonTargetModal, modal, open] {  
  if[!modal.classList.contains["modal--active"] && open] {  
    modal.classList.add["modal--active"]  
  }  
  else {  
    modal.classList.remove["modal--active"];  
  }  
  // đặt lại trạng thái cho nút button khi modal active | !active  
  buttonTargetModal.setAttribute["aria-open", open];  
}

Thế là mình đã hoàn thành việc xử lý modal với gần 40 dòng code JavaScript, có thể tái sử dụng cho 

Modal 1

3 Modal khác trong quá trình sử dụng sau này.

Nào, chúng ta cùng xem demo, mình có thể thêm 

  
  
  
  
  
    
  
      
Header modal
  
    
      
    
  
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
    
      
    
  
      
Cancel

2 modal tuỳ ý tương ứng với 

  
  
  
  
  
    
  
      
Header modal
  
    
      
    
  
      
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  
    
      
    
  
      
Cancel

2 nút button để bật nó mà không cần thêm bất kì đoạn JavaScript nào khác.

Chi tiết bản demo: Xem thử kết quả tại đây

Kết luận

Bài viết trên mình viết dựa trên kỹ thuật mình biết, có thể còn khó hiệu và không mạch lạc nhưng có thể sẽ giúp các bạn biết cách xây dựng một 

Modal 1

6 cơ bản và ngoài ra, có thể tìm cách để tái sử dụng mã bạn viết để không mất nhiều thời gian xây dựng lại làm phát sinh JavaScript dư thừa.

Bài Viết Liên Quan

Hướng dẫn sử dụng kích sóng wifi xiaomi repeater pro
Hướng dẫn sử dụng momo android nap tien lords mobile
Hướng dẫn đổi tên và mật khẩu wifi tp link
Hướng dẫn kết nối xiaomi desk lam với mi home
Hướng dẫn số 09-hd ntctwvề việc sinh hoạt chi bộ
Hướng dẫn download sách free trên amazon
Hướng dẫn chọn son hợp màu da
Hướng dẫn lái xe tự động
Link hướng dẫn chuyển tiền của ngân hàng tiên phong
Hướng dẫn kiểm tra nước uống đóng chai
Hướng dẫn cấu hình modem tp-link 740n
Hướng dẫn crack eplan p8.2.7
Hướng dẫn sử dụng thuốc kích rễ n3m
Hướng dẫn câu dây đồng hồ tua máy
Hướng dẫn kết nối không dây laptop với tivi sony
Hướng dẫn kết nối tai nghe bluetooth kz
Hướng dẫn edit ảnh bìa facebook cho fanpage
Hướng dẫn cài rom mới bằng twrp
Thông tư hướng dẫn nâng bậc lương trong doanh nghiệp
Hướng dẫn làm đồ ántramj bơm nuwosc thải

Toplist mới

#1
Top 6 bản thân em phải làm gì để phòng chống hiv/aids 2023
6 tháng trước
#2
Top 7 số 20 gồm 2 và 0 đúng hay sai 2023
6 tháng trước
#3
Top 7 địa lý lớp 6 bài 19: lớp đất và các nhân tố hình thành đất một số nhóm đất điển hình trang 178 2023
6 tháng trước
#4
Top 7 h thực hiện chủ trương đường lối chính sách của đảng pháp luật của nhà nước 2023
6 tháng trước
#5
Top 6 on tập tiếng việt lớp 7 học kĩ 2 violet 2023
6 tháng trước
#6
Top 7 trung du và miền núi bắc bộ có thế mạnh nổi bật về luyện kim đen 2023
6 tháng trước
#7
Top 8 mơ thấy có người to tình với mình 2023
6 tháng trước
#8
Top 6 nước yến cao cấp yến sào thiên hoàng 2023
6 tháng trước
#9
Top 7 ví dụ về quyết định hành chính nhà nước 2023
6 tháng trước

Bài mới nhất

Suửa lỗi chính tả tự động trong word năm 2024
Văn khấn thần tài thổ địa ngày rằm tháng giêng năm 2024
Bless the lord oh my soul là gì năm 2024
Danh mục hàng hóa mật mã dân sự năm 2024
Thực thi công vụ là gì năm 2024
App kiểm tra nguồn gốc hàng hóa qua mã vạch năm 2024
Mặt nổi mấy mục đốm đen là bị gì năm 2024
Hội chứng đao ở người biểu hiện như thế nào năm 2024
Làm thế nào để có hơi thở thơm mát năm 2024
Văn nghị luận về tư tưởng đạo lí lớp 10 năm 2024

Chủ Đề

Hỏi Đáp Mẹo Hay Toplist Là gì Địa Điểm Hay programming Học Tốt mẹo hay Công Nghệ Nghĩa của từ Khỏe Đẹp Bao nhiêu đánh giá Top List bao nhieu bao nhiêu hướng dẫn So Sánh Tiếng anh Bài tập So sánh Xây Đựng Sản phẩm tốt Ngôn ngữ Món Ngon Bài Tập Ở đâu Thế nào Tại sao Hướng dẫn Máy tính Dịch Bao lâu Đại học Khoa Học Vì sao