Cách làm một modal box đơn giản bằng HTML, CSS và Javascript

Cách Làm Modal Box Đơn Giản

Tìm hiểu cách tạo Modal Box bằng CSS và JavaScript.

cách làm modal box

Modal là một hộp thoại/cửa sổ bật lên được hiển thị ở đầu trang hiện tại.

Tự tạo và tùy chỉnh các thành phần giao diện trên trang web là một phần quan trọng của phát triển web. Trong bài viết này, chúng ta sẽ khám phá cách tạo một "model box" hoàn chỉnh bằng sự kết hợp của HTML, CSS và JavaScript.

HTML sẽ giúp bạn xác định cấu trúc cơ bản của model box, bao gồm cả nội dung bên trong. CSS sẽ là công cụ để bạn tạo kiểu cho hộp, tạo hiệu ứng chuyển động và ánh sáng, làm cho nó nổi bật trên trang. Cuối cùng, JavaScript sẽ giúp bạn thêm tính năng tương tác như mở, đóng hộp và xử lý dữ liệu từ người dùng.

Dưới sự hướng dẫn cụ thể và ví dụ minh họa, bạn sẽ thấy cách sáng tạo và tùy chỉnh model box theo ý muốn, từ việc thay đổi màu sắc và kiểu chữ cho đến thêm hiệu ứng động cuốn hút. Với kiến thức này, bạn sẽ có khả năng tạo ra các giao diện tương tác ấn tượng trên trang web của mình.

Hãy cùng bắt đầu hành trình khám phá cách tạo model box độc đáo cho trang web của bạn bằng cách kết hợp HTML, CSS và JavaScript!

Bước 1: Thêm HTML


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Modal Tutorials</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="container">
      <button id="myBtn" class="myBtn">Open Modal</button>
    </div>

    <div id="myModal" class="modal">
      <div class="modal-content">
        <div class="modal-header">
          <span class="close">&times;</span>
          <h2>Modal Header</h2>
        </div>
        <div class="modal-body">
          <p>Some text in the Modal Body</p>
          <p>Some other text...</p>
        </div>
        <div class="modal-footer">
          <h3>Modal Footer</h3>
        </div>
      </div>
    </div>
  </body>
  <script src="main.js"></script>
</html>

Bước 2: Thêm CSS


* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.myBtn {
  padding: 16px 32px;
  border-radius: 16px;
  background-color: #5cb85c;
  color: white;
  font-size: 18px;
  outline: none;
  border: none;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-header {
  padding: 16px 32px;
  background-color: #5cb85c;
  color: white;
}

.modal-body {
  padding: 16px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid #888;
  width: 60%;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  animation-name: animateTop;
  animation-duration: 0.4s;
}

.modal-footer {
  padding: 16px 32px;
  background-color: #5cb85c;
  color: white;
}

.close {
  color: #fff;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

@keyframes animateTop {
  from {
    top: 30%;
    opacity: 0;
  }
  to {
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
  }
}

Bước 3: Thêm Javascript


var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function () {
  modal.style.display = "block";
};

span.onclick = function () {
  modal.style.display = "none";
};

window.onclick = function (event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
};

Full tutorial:


Kết luận

Trong bài viết này, chúng ta đã cùng nhau khám phá quy trình tạo một "model box" đẹp mắt bằng HTML, CSS và JavaScript. Chúng ta đã bước qua từng bước từ việc xây dựng cấu trúc cơ bản của hộp, tới việc tạo kiểu cho nó và cuối cùng là thêm các tính năng tương tác động. Qua việc tìm hiểu và áp dụng, bạn có thể biết cách tùy chỉnh mọi khía cạnh của hộp, từ màu sắc cho đến hiệu ứng chuyển động.

Việc tạo ra các thành phần giao diện tương tác như model box không chỉ giúp trang web của bạn trở nên hấp dẫn hơn, mà còn nâng cao trải nghiệm người dùng. Điều quan trọng là bạn có sự linh hoạt và kiến thức cơ bản về HTML, CSS và JavaScript để tạo ra những hiệu ứng và tính năng độc đáo theo ý muốn.

Hy vọng rằng với kiến thức từ bài viết này, bạn sẽ tự tin hơn trong việc thực hiện các dự án phát triển web của mình. Đừng ngần ngại thử nghiệm và tạo ra những giao diện độc đáo để tạo ấn tượng với khán giả của bạn. Cảm ơn bạn đã đồng hành cùng chúng tôi trong hành trình này, và chúc mọi điều tốt lành cho sự phát triển của bạn trong lĩnh vực phát triển web!

Các bài viết liên quan:

No comments:

Powered by Blogger.