Lớp phương thức là gì?

Lớp phương thức là một yếu tố phát triển web được sử dụng rộng rãi để tạo các cửa sổ phương thức, IE Windows xuất hiện trên nội dung trang chính và yêu cầu sự chú ý của người dùng.

Làm thế nào để lớp phương thức hoạt động?

Lớp phương thức thường được triển khai bằng HTML, CSS và JavaScript. Nó cho phép một cửa sổ nổi được hiển thị trên màn hình, chặn phần còn lại của nội dung và yêu cầu hành động của người dùng trước khi tiếp tục.

Để tạo một lớp phương thức, bạn cần xác định phần tử HTML sẽ đóng vai trò là cửa sổ phương thức. Phần tử này có thể là một

Tiếp theo, bạn cần thêm các kiểu CSS để định vị cửa sổ phương thức vào trung tâm của màn hình và đặt diện mạo của nó. Điều này có thể được thực hiện bằng cách sử dụng các thuộc tính như vị trí, đỉnh, trái, chiều rộng, chiều cao, màu nền, trong số các thuộc tính khác.

Cuối cùng, bạn cần thêm mã JavaScript để kiểm soát hành vi của cửa sổ phương thức. Mã này thường chịu trách nhiệm hiển thị và ẩn cửa sổ phương thức, cũng như thêm tính tương tác, chẳng hạn như đóng các nút hoặc thực hiện các hành động cụ thể.

Ví dụ về mã HTML, CSS và JavaScript để tạo một lớp phương thức:

& Lt; html & gt;

& lt; đầu & gt;

& lt; phong cách & gt;

.Modal {

  Vị trí: Đã sửa;

  Top: 50%;

  Trái: 50%;

  Biến đổi: dịch (-50%, -50%);

  Chiều rộng: 400px;

  Chiều cao: 200px;

  Màu nền: Trắng;

  Biên giới: 1px màu đen rắn;

}

.Modal-Content {

  Đệm: 20px;

}
.Modal-Close {

  Vị trí: Tuyệt đối;

  Top: 10px;

  Phải: 10px;

  Con trỏ: Con trỏ;

}
& lt;/phong cách & gt;

& lt;/head & gt;

& Lt; cơ thể & gt;
& lt; div class = “modal” & gt;

  & Lt; div class = “Phương thức nội dung” & gt;

    & Lt; h2 & gt; phương thức tiêu đề cửa sổ & lt;/h2 & gt;

    & Lt; p & g; nội dung cửa sổ Modal & lt/p & g;

    & lt; span class = “close phương thức” & gt; gần & lt;/span & gt;

  & Lt;/div & gt;

& Lt;/div & gt;
& Lt; script & gt;

var modal = document.querySelector (‘. modal’);

Var CloseButton = document.QuerySelector (‘.-Close’);
CloseButton.AdDeventListener (‘Nhấp’, function () {

  modal.style.display = ‘none’;

});

& lt;/script & gt;
& Lt;/cơ thể & gt;

& lt;/html & gt;




 Trong ví dụ này, chúng tôi có mã HTML tạo ra một cửa sổ phương thức với tiêu đề, đoạn nội dung và nút đóng. CSS chịu trách nhiệm định vị và tạo kiểu cho cửa sổ phương thức, trong khi JavaScript thêm chức năng đóng cửa sổ bằng cách nhấp vào nút đóng. 

 Lớp phương thức rất hữu ích để hiển thị thông tin quan trọng, yêu cầu xác nhận hoặc thực hiện các hành động cụ thể trong một trang web. Nó cho phép người dùng tương tác với nội dung tập trung hơn và tránh những phiền nhiễu không cần thiết.