programming javascript

Hiển thị div dưới dạng hộp thoại phương thức JavaScript

Tìm hiểu cách tạo cửa sổ phương thức bật lên đáp ứng đơn giản bằng Vanilla JavaScript cùng với HTML và CSS với một chút Flexbox

Tạo một nút mở cửa sổ phương thức bật lên

Declare a HTML element with an id open-modal.

Open Modal Window

Mục đích là khi người dùng nhấn nút này, cửa sổ pop-up modal sẽ mở ra

Tạo kiểu cho nút bằng CSS Flexbox và căn giữa nút trên màn hình

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

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba[0, 0, 0, 0.2];
    cursor: pointer;
}

button:hover {
    background: rgba[0, 0, 0, 0.7];
}

Tạo lớp phủ phương thức bật lên

Thông thường, các cửa sổ dạng bật lên có lớp phủ với nền tối hơn trong suốt bao phủ toàn bộ màn hình trình duyệt

Xác định một div với lớp phủ mô hình id sẽ bao phủ toàn bộ màn hình

Sau đó, hiển thị toàn màn hình bằng cách sử dụng chiều cao. Thuộc tính CSS 100vh

Đưa nó ra trước nút bằng cách sử dụng vị trí. tuyệt đối với màu nền trong suốt

#modal-overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    background: rgba[0, 0, 0, 0.7];
}

Tôi vừa thêm đường viền để xem ranh giới của phần tử lớp phủ phương thức

Cửa sổ phương thức bật lên trung tâm đến lớp phủ phương thức

Tạo một div với một phương thức id bên trong phần tử lớp phủ phương thức, đây sẽ là một cửa sổ phương thức bật lên thực sự mà người dùng tương tác với

Thêm kiểu CSS để hiển thị trên màn hình .

Thêm chiều rộng. 100% và chiều rộng tối đa. 650px sẽ đảm bảo chiều rộng của cửa sổ kiểu bật lên sẽ không vượt quá khi chiều rộng của trình duyệt lớn hơn 650px

Nếu chiều rộng của trình duyệt nhỏ hơn 650px, cửa sổ kiểu bật lên sẽ kéo dài chiều rộng để lấp đầy màn hình, điều này thường dành cho chế độ xem trên thiết bị di động

#modal-overlay #modal {
    max-width: 650px;
    width: 100%;
    background: white;
    height: 400px;
}

Căn giữa cửa sổ chế độ bật lên vào màn hình bằng Flexbox.

Để làm điều đó, chỉ cần thêm ba dòng mã Flexbox vào lớp phủ phương thức là

trưng bày. flex → Chuyển đổi phần tử HTML sang Flexbox
sắp xếp các mục. trung tâm → căn giữa cửa sổ phương thức bật lên theo chiều dọc của chế độ xem
biện minh cho nội dung. trung tâm → căn giữa cửa sổ phương thức bật lên theo chiều ngang với chế độ xem

#modal-overlay {
   ...
  
   display: flex;
   align-items: center;
   justify-content: center;
}

Mở cửa sổ bật lên theo chế độ nhấp vào nút

Bây giờ chúng ta có cửa sổ pop-up modal cơ bản được thiết kế bằng CSS

Làm cho nó hiển thị khi người dùng nhấn nút phương thức mở

Để làm việc đó,

Đầu tiên, ẩn lớp phủ phương thức theo mặc định bằng cách thay đổi thuộc tính hiển thị của nó từ flex thành none

#modal-overlay {
   ...
  
   display: none; // Changed from flex to none
   align-items: center;
   justify-content: center;
}

Tạo tham chiếu DOM cho nút mở phương thức cũng như các phần tử lớp phủ phương thức

________số 8_______

Đính kèm một sự kiện nhấp chuột vào openModalButton với chức năng mũi tên gọi lại showModalWindow

const showModalWindow = [] => {
    modalWindowOverlay.style.display = 'flex';
}

openModalButton.addEventListener["click", showModalWindow];

Đặt thuộc tính hiển thị của modalWindowOverlay thành flex bên trong hàm showModalWindow[] sẽ mở cửa sổ phương thức

Như bạn có thể thấy, không có cách nào chúng ta có thể đóng/ẩn cửa sổ chế độ bật lên sau khi nó hiển thị trên màn hình

Hãy sửa nó

Đóng/Ẩn cửa sổ bật lên trên nút bấm

Thông thường, sẽ có một nút đóng ở trên cùng hoặc dưới cùng bên phải của cửa sổ chế độ bật lên

Hãy thêm một nút đóng ở phía dưới bên trái của cửa sổ phương thức

Xác định các phần tử HTML đầu trang, nội dung và chân trang bên trong cửa sổ phương thức bật lên

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

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba[0, 0, 0, 0.2];
    cursor: pointer;
}

button:hover {
    background: rgba[0, 0, 0, 0.7];
}

Nói chung, bạn sẽ có hai nút ở cuối cửa sổ chế độ bật lên, có thể là lưu và đóng

Hãy đẩy các nút xuống dưới cùng bằng Flexbox

Biến thuộc tính hiển thị của cửa sổ phương thức bật lên thành flex và đặt hướng flex thành cột

Đặt lề trên thành tự động thành. phần tử modal-footer đẩy các nút xuống dưới cùng

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

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba[0, 0, 0, 0.2];
    cursor: pointer;
}

button:hover {
    background: rgba[0, 0, 0, 0.7];
}

Hãy ẩn cửa sổ kiểu bật lên khi người dùng nhấn nút đóng.

Xác định tham chiếu DOM của nút đóng

Đính kèm sự kiện nhấp vào nút đóng bằng chức năng gọi lại ẩn Modal Window

Khai báo hàm hideModalWindow và đặt thuộc tính hiển thị của modalWindowOverlay thành none bên trong nó

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

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba[0, 0, 0, 0.2];
    cursor: pointer;
}

button:hover {
    background: rgba[0, 0, 0, 0.7];
}

Ẩn cửa sổ bật lên Cửa sổ phương thức khi vi Lớp phủ phương thức được nhấp

Ngoài nút đóng, bạn thường thấy cửa sổ dạng pop-up sẽ đóng hoặc ẩn đi khi người dùng click chuột khỏi nó

Để làm điều đó, chúng tôi cần xác định xem liệu người dùng có nhấp vào cửa sổ kiểu bật lên thực tế và nội dung của nó bên trong hay lớp phủ phương thức bao phủ toàn bộ màn hình

Để kiểm tra điều đó,

Đính kèm sự kiện nhấp chuột vào #modal-overlay với chức năng gọi lại hideModalWindowOnBlur

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

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba[0, 0, 0, 0.2];
    cursor: pointer;
}

button:hover {
    background: rgba[0, 0, 0, 0.7];
}

Sử dụng điện tử. mục tiêu và e. currentTarget của một đối tượng sự kiện, chúng ta có thể xác định nơi người dùng nhấp vào khi cửa sổ phương thức bật lên hiển thị trên màn hình

e. mục tiêu sẽ nắm bắt một phần tử HTML được nhấp có thể là phần tử cha hoặc phần tử con

Phần tử cha sẽ được tham chiếu đến một phần tử có sự kiện nhấp được đính kèm với

Trong trường hợp này, #modal-overlay

Các phần tử con sẽ được tham chiếu đến tất cả các phần tử HTML ngay bên trong phần tử cha

Mặt khác, đ. currentTarget sẽ chỉ nhận phần tử cha bất kể người dùng nhấp vào phần tử cha hay phần tử con ở đâu

Trong trường hợp này, #modal-overlay

Bằng cách này, chúng tôi có thể xác định xem người dùng nhấp vào #modal-overlay hay cửa sổ phương thức bật lên thực tế

Nếu người dùng nhấn lớp phủ phương thức, hãy ẩn/đóng nó bằng cách kiểm tra xem e. giá trị mục tiêu bằng e. Mục tiêu hiện tại

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

body {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

button {
    padding: 10px;
    font-size: 1.1em;
    background: #32bacf;
    color: white;
    border: none;
    border-radius: 10px;
    border: 1px solid rgba[0, 0, 0, 0.2];
    cursor: pointer;
}

button:hover {
    background: rgba[0, 0, 0, 0.7];
}

Hãy dùng thử ⛹️

Xem Pen Make Pop-Up Modal Window In Vanilla JavaScript {Dùng thử} của Raja Tamil [@rajarajan] trên CodePen

Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào về bài viết này, vui lòng liên hệ với tôi bằng cách bình luận bên dưới và tôi sẽ đọc và trả lời từng người trong số họ

Làm cách nào để hiển thị div trong cửa sổ bật lên bằng JavaScript?

Để bật phần tử div ở giữa trang web trong JavaScript, áp dụng “tài liệu. querySelector[]” hoặc “tài liệu. getElementById[]” để tìm nạp div đã tạo bằng cách sử dụng id của nó để bật lên .

Làm cách nào để hiển thị hộp thoại phương thức trong JavaScript?

Phương thức showModal[] của hộp thoại . Khi phương thức này được sử dụng để hiển thị cửa sổ hộp thoại, người dùng không thể tương tác với các phần tử khác trên trang. Sử dụng phương thức show[] nếu bạn muốn người dùng tương tác với các thành phần khác trên trang trong khi hộp thoại được hiển thị.

Làm cách nào để hiển thị div dưới dạng cửa sổ bật lên phương thức bằng jQuery?

Tạo một phương thức .

Tạo một nút mở cửa sổ phương thức bật lên

Tạo lớp phủ phương thức bật lên

Cửa sổ phương thức bật lên trung tâm đến lớp phủ phương thức

Mở cửa sổ bật lên theo chế độ nhấp vào nút

Đóng/Ẩn cửa sổ bật lên trên nút bấm

Ẩn cửa sổ bật lên Cửa sổ phương thức khi vi Lớp phủ phương thức được nhấp

Làm cách nào để hiển thị div trong cửa sổ bật lên bằng JavaScript?

Làm cách nào để hiển thị hộp thoại phương thức trong JavaScript?

Làm cách nào để hiển thị div dưới dạng cửa sổ bật lên phương thức bằng jQuery?

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề