The secret to wholesale...

In the article about buying Thai goods, I introduced wholesale markets and cheap...

Restaurant business and the...

Customers are a special figure in restaurants. This may seem obvious, but...

Guide the clues to...

Japanese goods Known for putting quality first. However, in the past, due...

Online cosmetics business and...

Starting a business, especially online cosmetics business is the silver trend and...
HomeLập trìnhJavaScriptCách xây dựng...

Cách xây dựng một phương thức bằng JavaScript


Điều này có thể đã xảy ra với bạn trước đây: bạn vô tình cố gắng thực hiện một hành động trên trang web, nhưng may mắn là có một cửa sổ bật lên yêu cầu bạn xác nhận quyết định của mình.

Cửa sổ bật lên này được gọi là phương thức. Đó là một thành phần trang web bật lên và hiển thị trước nội dung trang khác.

Bạn có thể sử dụng các phương thức để thực hiện những việc như lưu trữ thông tin mà bạn không muốn thấy ngay trên trang web, tạo menu điều hướng, thêm các yếu tố kêu gọi hành động, v.v.

Một ví dụ tuyệt vời là phương thức xuất hiện trên Twitter khi bạn cố gắng đóng menu soạn tweet.

Cửa sổ phương thức cảnh báo Twitter

Bạn cũng có thể sử dụng các phương thức cho những thứ khác như tạo các yếu tố kêu gọi hành động, menu điều hướng, tiện ích bản tin, v.v.

Là một nhà phát triển web, biết cách xây dựng một phương thức có thể là một kỹ năng hữu ích cần có. Trong hướng dẫn này, tôi sẽ hướng dẫn bạn quy trình về cách bạn có thể tạo một phương thức đơn giản bằng cách sử dụng HTML, CSS và JavaScript.

Đây là một ảnh chụp màn hình về những gì chúng tôi sẽ xây dựng:

Một phương thức được xây dựng bằng html, css và javascript

Các bước rất dễ thực hiện nên bạn có thể tùy chỉnh phương thức hoặc xây dựng phương thức của riêng mình từ đầu – điều đó hoàn toàn tùy thuộc vào bạn. Ở cuối bài viết này, tôi sẽ cung cấp tệp codepen để bạn có thể sử dụng nó.

Bước 1 – Thêm đánh dấu

Được rồi, hãy bắt đầu với HTML.

Đầu tiên, bạn sẽ thêm một section phần tử và cung cấp cho nó hai lớp, modalhidden. Dưới phần tử này, bạn cũng sẽ có một <div> phần tử với một lớp overlayhidden. Sau đó, cuối cùng, bạn sẽ thêm một <button> phần tử với một lớp btnbtn-open.

Đây là những gì trông giống như:

<section class="modal hidden"></section>
<div class="overlay hidden"></div>
<button class="btn btn-open">Open Modal</button>
  • Phần tử phần có lớp phương thức sẽ đóng vai trò là bộ chứa phương thức của bạn.
  • Div với lớp overlay sẽ đóng vai trò là thành phần lớp phủ của bạn. Đây là nền mờ tối mà bạn nhìn thấy khi chế độ mở.
  • Nút có lớp btnbtn-open sẽ đóng vai trò là nút phương thức của bạn để nó kích hoạt phương thức của chúng tôi khi bạn nhấp vào nút này.
Đọc thêm  Ba cách để đảo ngược một chuỗi trong JavaScript

Bây giờ, bên trong phương thức của bạn, hãy thêm đánh dấu và cũng thêm X nút để đóng phương thức. Nút này sẽ được gán một btn-close lớp.

Vì vậy, đây là phần đánh dấu hoàn chỉnh của bạn sẽ trông như thế nào khi kết thúc:

<section class="modal hidden">
  <div class="flex">
    <img src="https://www.freecodecamp.org/news/how-to-build-a-modal-with-javascript/user.png" width="50px" height="50px" alt="user" />
    <button class="btn-close">⨉</button>
  </div>
  <div>
    <h3>Stay in touch</h3>
    <p>
      This is a dummy newsletter form so don't bother trying to test it. Not
      that I expect you to, anyways. :)
    </p>
  </div>

  <input type="email" id="email" placeholder="[email protected]" />
  <button class="btn">Submit</button>
</section>

<div class="overlay hidden"></div>
<button class="btn btn-open">Open Modal</button>

Quan trọng ⚠️ Hãy lưu ý lớp ẩn được thêm vào thành phần phương thức và lớp phủ. Điều này rất quan trọng vì bạn sẽ nhắm mục tiêu các lớp này để ẩn phương thức và lớp phủ của mình bằng CSS.

Đây là đầu ra:

đánh dấu hoàn chỉnh

Bước 2 – Tạo kiểu cho Modal

Hãy bắt đầu bằng cách đặt lại lề và phần đệm mặc định của mọi thành phần trên trang, sau đó căn giữa cả nút phương thức và nút mở phương thức.

Bây giờ hãy chuyển sang CSS của bạn và thêm các kiểu sau:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Inter", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #222;
  position: relative;
  min-height: 100vh;
}

Bước tiếp theo là tạo kiểu cho chính thùng chứa phương thức và các phần tử bên trong thùng chứa. Quá trình này hơi dài nên tôi sẽ chỉ sao chép và dán kiểu dáng ở đây rồi giải thích một chút sau:

.modal {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  width: 450px;
  padding: 1.3rem;
  min-height: 250px;
  position: absolute;
  top: 20%;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 15px;
}

.modal .flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.modal input {
  padding: 0.7rem 1rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 0.9em;
}

.modal p {
  font-size: 0.9rem;
  color: #777;
  margin: 0.4rem 0 0.2rem;
}

button {
  cursor: pointer;
  border: none;
  font-weight: 600;
}

.btn {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  font-weight: 700;
  background-color: black;
  color: white;
  border-radius: 5px;
  text-align: center;
  font-size: 1em;
}

.btn-open {
  position: absolute;
  bottom: 150px;
}

.btn-close {
  transform: translate(10px, -20px);
  padding: 0.5rem 0.7rem;
  background: #eee;
  border-radius: 50%;
}

Và đây là đầu ra:

kiểu hoàn chỉnh

Những gì bạn đã làm là tạo kiểu cho thành phần phương thức và sau đó định vị nó bằng thuộc tính tuyệt đối. Điều này hoạt động vì bạn đã thêm thuộc tính vị trí tương đối vào phần tử nội dung trước đó.

Bạn cũng đã tạo kiểu cho các phần tử bên trong phương thức, nhưng tôi sẽ không đi sâu vào chi tiết về điều đó vì điều đó không hoàn toàn quan trọng đối với chúng tôi ở đây.

Đọc thêm  Bong bóng sự kiện trong JavaScript – Cách lan truyền sự kiện hoạt động với các ví dụ

Bước 3 – Thêm lớp phủ

Đối với lớp phủ, bạn muốn định vị nó trên toàn bộ trang với nền tối tinh tế và mờ.

Vì bạn có vị trí tương ứng với phần tử nội dung, nên bạn có thể sử dụng thuộc tính cố định vị trí để thêm lớp phủ trên phần tử nội dung. Bạn sẽ phủ nó lên 100% chiều rộng và chiều cao của khung nhìn.

.overlay {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
  z-index: 1;
}

Đây là đầu ra:

lớp phủ

Lớp phủ hoạt động, nhưng bạn chỉ muốn nó ảnh hưởng đến phần tử cơ thể chứ không phải phương thức. Để khắc phục điều này, hãy thêm một cao hơn z-index thuộc tính vào thùng chứa phương thức.

.modal {
  z-index: 2;
}

Bây giờ, phương thức phải nằm trên lớp phủ chứ không phải phía sau nó.

phương thức

Bạn đã tạo thành công phương thức và thêm lớp phủ phía sau nó! Nhưng bạn không muốn hiển thị phương thức, ít nhất là cho đến khi open-modal nút được bấm.

Để ẩn nó, bạn cần nhắm mục tiêu .hidden lớp mà bạn đã thêm trước đó vào thành phần phương thức và lớp phủ trong CSS của mình. Bạn cũng sẽ không hiển thị nó.

.hidden {
  display: none;
}

Bây giờ chỉ có nút được hiển thị trên trang. Bây giờ bạn có thể làm việc với chức năng phương thức bằng JavaScript.

Bước 4 – Thêm chức năng phương thức

Trước khi chúng tôi tiếp tục, tôi tin rằng tốt nhất là giải thích cách thức hoạt động của phương thức. Hãy nhớ cách bạn đã sử dụng hidden class để ẩn phương thức và lớp phủ? Để thêm hoặc xóa lớp này khỏi các phần tử, bạn sẽ sử dụng phần tử classList của DOM.

Nhưng trước tiên, bạn cần chọn các lớp của mình bằng DOM’s querySelector phương thức và lưu trữ chúng trong các biến để chúng có thể tái sử dụng.

const modal = document.querySelector(".modal");
const overlay = document.querySelector(".overlay");
const openModalBtn = document.querySelector(".btn-open");
const closeModalBtn = document.querySelector(".btn-close");

Cách mở phương thức

Mặt khác để hiển thị phương thức, hãy tạo một hàm gọi là openModal. Bên trong chức năng này, bạn sẽ sử dụng DOM classList thuộc tính có các phương thức khác nhau như .remove().add() để loại bỏ hidden lớp học từ modaloverlay.

const openModal = function () {
  modal.classList.remove("hidden");
  overlay.classList.remove("hidden");
};

Và sau đó bạn có thể sử dụng một eventListener để liên kết chức năng này với nút phương thức mở openModalBtn. Theo cách đó, bất cứ khi nào nút này được nhấp, chức năng sẽ được thực thi, hiển thị phương thức.

openModalBtn.addEventListener("click", openModal);

Bây giờ khi bạn bấm vào open modal nút, điều này sẽ loại bỏ các hidden class khỏi phần tử phương thức và bạn có thể thấy phương thức của mình.

Đọc thêm  Tìm hiểu phát triển JavaScript về Blockchain, Solidity và Full Stack

Đây là đầu ra:

mở phương thức

Cách đóng Modal

Để đóng phương thức, bạn cũng sẽ tạo một hàm gọi là closeModal. Bên trong chức năng, sử dụng .add() phương pháp thêm lại hidden lớp bạn đã xóa.

Các classList tài sản cũng có một add() phương pháp mà bạn sẽ sử dụng để thêm lại lớp ẩn khi bạn nhấp vào closeModal cái nút. Giống như bạn đã thêm một eventListener đến nút để đóng chế độ, bạn sẽ làm tương tự với x nút – nhưng lần này, bạn sẽ thêm nút hidden lớp trở lại.

const closeModal = function () {
  modal.classList.add("hidden");
  overlay.classList.add("hidden");
};

Để đóng phương thức, hãy thêm một eventListener đến nút đóng phương thức để thực hiện chức năng bạn vừa viết bây giờ.

closeModalBtn.addEventListener("click", closeModal);

Bây giờ khi bạn nhấp vào nút đóng, hàm sẽ thêm lại lớp ẩn vào các thành phần phương thức và lớp phủ, do đó đóng phương thức.

Đây là đầu ra

phương thức đóng

Thông thường, các phương thức cũng bị đóng khi bạn nhấp vào bên ngoài vùng chứa phương thức hoặc trên phần nội dung của trang web. Để làm điều đó, hãy thêm một eventListener để đóng phương thức khi bạn nhấp vào lớp phủ.

overlay.addEventListener("click", closeModal);

close_modal_when_overlay_is_clicked

Cách đóng Modal khi nhấn phím

Ngoài việc đóng phương thức khi bạn nhấp vào nút đóng hoặc lớp phủ, bạn cũng có thể đính kèm trình xử lý sự kiện để theo dõi các sự kiện bàn phím.

Trong trường hợp này, bạn muốn phương thức đóng khi bạn nhấn nút Escape key, giống như trong ví dụ về phương thức soạn thư của Twitter.

document.addEventListener("keydown");

Nhưng lần này loại sự kiện bạn muốn không phải là “click” sự kiện – bạn muốn sử dụng “keydown” event để thực thi chức năng của bạn.

Tiếp theo, bạn sẽ viết một điều kiện để kiểm tra xem phím hiện tại được nhấn có phải là phím Escape key và modal không chứa hidden lớp. Vì vậy, nó đang mở và bạn muốn thực hiện closeModal chức năng (về bản chất, đóng phương thức).

document.addEventListener("keydown", function (e) {
  if (e.key === "Escape" && !modal.classList.contains("hidden")) {
    modalClose();
  }
});

Bây giờ khi chế độ được mở và bạn nhấn <kbd>Esc</kbd> key, nó sẽ đóng modal.

Và với điều này, bạn đã tạo thành công một thành phần phương thức với HTML, CSS và JavaScript và thành phần này hoạt động như dự định. 🥳

Đây là tệp codepen để kiểm tra hoạt động của phương thức này:

Phần kết luận

Tôi chân thành hy vọng bạn thấy bài đăng này thú vị hoặc hữu ích. Nếu bạn đã làm, vui lòng chia sẻ với bạn bè của bạn hoặc đăng ký blog của tôi để bạn không bỏ lỡ bất kỳ bài đăng nào trong tương lai. Cảm ơn vì đã đọc.

GitHub | Twitter | Blog | danh mục đầu tư





Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status