Cách Tạo Modal Cho Website

Cách Tạo Modal Cho Website


Ngày 31 Tháng 10 Năm 2021

Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách tạo modal bằng HTML CSS và Javascript cho website nha.

Modal Jquery Cho Website

HTML

Trong phần này chúng ta sẽ đi vào tạo cấu trúc html cho modal cũng như thêm các thư viện cần thiết cho chức năng này như jquery và font awesome bằng đoạn code dưới đây nha.

<!DOCTYPE html>
<html lang="vi">
   <head>
      <meta charset="utf-8">
      <script src="https://code.jquery.com/jquery-3.5.0.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> 
      </head>
   <body>
      <div class="show-btn">
         <button>Hiển Thị Modal</button>
      </div>
      <div class="modal">
         <div class="top-content">
            <div class="left-text">
               Modal
            </div>
            <span class="close-icon"><i class="fas fa-times"></i></span>
            <div class="far fa-list-alt"></div>
         </div>
         <div class="bottom-content">
            <div class="text">
                Tiêu Đề
            </div>
            <p>
               Niềm Vui Lập Trình 
            </p>
            <div class="close-btn">
               <button>Đóng Modal</button>
            </div>
         </div>
      </div>
   </body>
</html>

CSS

Trong phần này chúng ta sẽ đi vào sử dụng các thuộc tính CSS cơ bản để thiết lập style modal bằng đoạn code sau nha:

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:[email protected];500;700&display=swap'); *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Open Sans', sans-serif;
}
body{
  text-align: center;
  overflow: hidden;
}
.show-btn{
  position: absolute;
  top: 50%;
  left: 50%;
  user-select: none;
  transform: translate(-50%, -50%);
}
.show-btn.disabled{
  pointer-events: none;
}
/*Thiết lập style cho modal box*/
.modal{
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
  width: 360px;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
/* Hiển Thị Modal modal box*/
.modal.show{
  top: 100%;
  left: 100%;
  transition: bottom 1s, opacity 1s;
  bottom: 0;
  opacity: 1;
}
.modal .top-content{
  background: #1E90FF;
  width: 100%;
  padding: 0 0 30px 0;
}
.top-content .left-text{
  text-align: left;
  padding: 10px 15px;
  font-size: 18px;
  color: #f2f2f2;
  font-weight: 500;
  user-select: none;
}
.top-content .close-icon{
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 23px;
  color: #fff;
  cursor: pointer;
}
.close-icon:hover{
  color: #FF1493;
}
.top-content .fa-list-alt{
  font-size: 80px;
  color: #fff;
}
.modal .bottom-content{
  background: white;
  width: 100%;
  padding: 15px 20px;
}
.bottom-content .text{
  font-size: 28px;
  font-weight: 600;
  color: #34495e;
}
.bottom-content p{
  font-size: 18px;
  line-height: 27px;
  color: grey;
}
.bottom-content .close-btn{
  padding: 15px 0;
}
/*Thiết Lập Style cho nút*/
.show-btn button,
.close-btn button{
  padding: 9px 13px;
  background: #1E90FF;
  border: none;
  outline: none;
  font-size: 18px;
  text-transform: uppercase;
  border-radius: 3px;
  color: #f2f2f2;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.show-btn button{
  padding: 12px 15px;
}
/*Thiết lập màu săc cho button khi hover*/
.show-btn button:hover,
.close-btn button:hover{
  background: #000080;
}

Javascript

Trong phần này chúng ta sẽ đi vào sử dụng thuộc tính toggleClass trong Jquery để thiết lập chế độ hiển thị cho modal thông qua đoạn code sau nha:

$('.show-btn').click(function(){
  $('.modal').toggleClass("show");
  $('.show-btn').addClass("disabled");
});
$('.close-icon').click(function(){
  $('.modal').toggleClass("show");
  $('.show-btn').removeClass("disabled");
});
$('.close-btn').click(function(){
  $('.modal').toggleClass("show");
  $('.show-btn').removeClass("disabled");
});

Và kết quả bạn xem video dưới đây nha!

Còn dưới đây là kết quả trên Codepen nha.

See the Pen modal by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nếu bạn muốn tham khảo thêm các ví dụ về modal thì xem ở đây nhé.

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn cách tạo modal cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!