With code on haveid of thehộp thoại là #dialog1, default hộp thoại ẩn, để kích hoạt thị trường có thể làm như sau
Mở hộp thoại bằng JS
Khi muốn bật hộp thoại trên, hãy chạy mã sau
Khai báo phần tử kích hoạt hộp thoại
Có thể khai báo các lần nhấn nút với thông số như sau để thư viện Bootstrap tự chạy JS và mở hộp thoại khi nhấn vào nút nhấn
Mở hộp thoại Mở hộp thoạiTrình bày các thành phần của Hộp thoại tại đây
To reconverter size box. cho thêm vào .modal-dialog các lớp. .modal-lg tạo hộp thoại lớn, .modal-sm tạo hộp thoại nhỏ
Phương thức về cơ bản là hộp thoại hoặc cửa sổ bật lên được sử dụng để cung cấp thông tin quan trọng cho người dùng hoặc nhắc nhở người dùng thực hiện các hành động cần thiết trước khi tiếp tục
Phương thức được sử dụng rộng rãi để cảnh báo người dùng về các vấn đề như hết thời gian hoặc để xác nhận nhận cuối cùng của họ trước khi thực hiện bất kỳ hành động quan trọng nào như lưu hoặc xóa dữ liệu quan trọng
Bạn có thể dễ dàng tạo các hộp thoại rất thông minh và linh hoạt với plugin Bootstrap Modal. Ví dụ sau mô tả cấu trúc cơ bản để tạo một đơn giản phương thức với tiêu đề, nội dung và chân trang chứa các nút hành động cho người dùng
Confirmation
Do you want to save changes to this document before closing?
If you don't save, your changes will be lost.
Cancel Save changes
Nếu bạn thử ví dụ trên, nó sẽ tự động khởi động cửa sổ modal khi DOM được tải xuống đầy đủ thông qua JavaScript. Đầu ra sẽ giống như sau
Launch Demo Modal
Confirmation
Do you want to save changes to this document before closing?
If you don't save, your changes will be lost.
Cancel Save changes
Ví dụ về việc khởi chạy phương thức cửa sổ khi nhấp vào nút "Khởi chạy phương thức demo". Chúng ta hãy xem qua từng phần của mã phương thức này để hiểu rõ hơn
Giải thích mã
Để kích hoạt Bootstrap Modal thông qua thuộc tính dữ liệu, về cơ bản, chúng ta cần hai thành phần - phần điều khiển như nút hoặc liên kết và bản thân phần tử của phương thức
- Khu vực chứa bên ngoài của mọi phương thức trong tài liệu phải có một id duy nhất (trong trường hợp này 0, là dòng số 5), để nó có thể nhắm mục tiêu thông tin tiêu dùng qua thuộc tính 1(đối với các nút) hoặc thuộc tính
- Thuộc tính 3 bắt buộc phải bổ sung vào phần điều khiển tử (dòng số 2), như một nút hoặc một siêu liên kết, cùng với một thuộc tính 4 hoặc 5 để nhắm mục tiêu vào một phương thức có thể chuyển đổi
- Lớp 6 (dòng số 6) đặt chiều rộng cũng như căn chỉnh theo chiều ngang và chiều dọc của phương thức. Trong khi lớp 7 đặt các kiểu như văn bản và màu nền, đường viền, góc tròn, v. v
Phần còn lại của vấn đề là tự giải thích, chẳng hạn như phần tử 8 định nghĩa tiêu đề cho phương thức thường bao gồm tiêu đề phương thức và nút đóng, trong khi phần tử 9 chứa nội dung thực tế như văn bản, hình ảnh, biểu cảm . v. và phần tử Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
0 định nghĩa chân trang thường bao gồm các nút hành động cho người dùngLưu ý. Lớp Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
1 trên phần tử Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
2 bổ sung hiệu ứng tăng dần và trượt trong khi hiển thị và ẩn chế độ cửa sổ. Nếu bạn muốn phương thức xuất hiện đơn giản mà không có bất kỳ hiệu ứng nào, bạn có thể xóa lớp này. Ngoài ra, khi modal trở nên quá dài đối với khung nhìn hoặc thiết bị của người dùng, họ sẽ cuộn độc lập với chính trang đó
Kích hoạt Modal bằng JavaScript
Bạn cũng có thể kích hoạt cửa sổ phương thức thông qua JavaScript - chỉ cần gọi phương thức Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
3 Bootstrap với bộ chọn là Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
4 hoặc Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
5 của phương thức trong mã JavaScript của bạnChange the size of Modal
Bootstrap cung cấp cho bạn thêm tùy chọn để thay đổi kích thước của phương thức. Bạn có thể tạo các modal nhỏ, lớn cũng như cực lớn bằng cách thêm một lớp bổ sung Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
6, Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
7 và Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
8 tương ứng trên 6. This is a ví dụ Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
mẹo. Chiều rộng tối đa của phương thức mặc định sẽ là 0, trong khi chiều rộng tối đa của phương thức nhỏ, lớn và cực đại sẽ là 1, 2, 3
Thay đổi phương thức nội dung dựa trên nút kích hoạt
Thường thì một số phương thức trên một trang web có nội dung gần như giống nhau với những khác biệt nhỏ
Bạn có thể sử dụng các điều kiện của phương thức để tạo các cửa sổ phương thức hơi khác nhau dựa trên cùng một phương thức HTML. Ví dụ sau đây sẽ chỉ cho bạn cách thay đổi tiêu đề của phương thức cửa sổ theo giá trị thuộc tính 4 của nút kích hoạt
Create modal căn giữa theo chiều dọc
Chỉ cần thêm lớp 5 vào phần tử 6 để căn giữa phương thức theo chiều dọc. Nếu modal có nội dung dài, bạn có thể áp dụng thêm lớp 7 trên 6 để làm cho modal nội dung có thể cuộn được. This is a ví dụ
Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
Sử dụng lưới bên trong phương thức
Bạn cũng có thể sử dụng hệ thống lưới Bootstrap để tạo lưới bố cục trong một phương thức. Đơn giản, sử dụng lớp 9 để tạo hàng và sử dụng các lớp Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
0, Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
1, Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
2, Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
3 và Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
4 để tạo cột bên trong. Please view a ví dụ
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
Tải nội dung trong phương thức bằng Ajax
Bạn cũng có thể tải nội dung cho phương thức Bootstrap thông qua Ajax
Trong ví dụ sau, nội dung bên trong phần thân modal sẽ được chèn từ một tệp từ xa khi kích hoạt bằng phương thức Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
5 của jQuery và sự kiện Bootstrap Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
6 Launch Demo Modal
Ajax Loading Demo
Close OK, Got it!
mẹo. Bạn cũng có thể đặt chú giải công cụ và cửa sổ bật lên trong phương thức nếu cần. Khi đóng phương thức, mọi chú giải công cụ và cửa sổ bật lên bên trong cũng tự động bị loại bỏ
Tùy chọn
Có một số tùy chọn nhất định có thể truyền cho phương thức Extra Large modal
Extra Large Modal
Add the .modal-xl class on .modal-dialog to create this extra large modal.
Cancel OK
Large modal
Large Modal
Add the .modal-lg class on .modal-dialog to create this large modal.
Cancel OK
Small modal
Small Modal
Add the .modal-sm class on .modal-dialog to create this small modal.
Cancel OK
3 Bootstrap để điều chỉnh chức năng của một phương thức. Các tùy chọn có thể được truyền qua các thuộc tính dữ liệu hoặc JavaScriptĐể đặt các tùy chọn phương thức thông qua các thuộc tính dữ liệu, chỉ cần thêm tên tùy chọn vào Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
8, ví dụ như Vertically Centered Modal
Vertical Alignment Demo
Lorem ipsum dolor sit amet, consectetur elit...
Close OK, Got it!
9,
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
0, v. vTênKiểuGiá trị mặc địnhMô tảbackdropboolean
hoặc chuỗi
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
1 true Phông nền modal (khu vực lớp phủ màu đen). Ngoài ra, bạn có thể chỉ định giá trị
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
2 để không đóng chế độ khi nhấp chuột vào phông nền. keyboardbooleantrue Thatng modal window khi nhấn phím Esc. focusbooleantrueĐặt focus vào modal khi khởi động. showbooleantrueHiển thị modal khi khởi động hoặc kích hoạtThuộc tính dữ liệu cung cấp một cách dễ dàng để thiết lập các tùy chọn cho phương thức, tuy nhiên JavaScript là cách thích hợp hơn vì nó ngăn bạn khỏi công việc lặp đi lặp lại. Xem các ví dụ bên dưới để biết cách thiết lập tùy chọn cho phương thức bằng JavaScript
Trong ví dụ sau, chúng tôi đã đặt tùy chọn
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
3 thành
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
2(dòng số 5) để ngăn chế độ đóng khi nhấp vào chế độ bên ngoài, tức là vùng phủ màu đen Launch Demo Modal
Confirmation
Do you want to save changes to this document before closing?
If you don't save, your changes will be lost.
Cancel Save changes
The method of modal
This is the normal method of bootstrap
Truyền các tùy chọn cho phương thức
Ngoài ra, bạn có thể truyền các tùy chọn cho các tùy chọn sử dụng đối tượng phương thức
Hãy thử ví dụ sau đây sẽ dừng chế độ đóng khi người dùng nhấp vào phông nền (tức là vùng phủ màu đen phía sau chế độ)
Ví dụ: Stop modal close khi nhấn phím esc
chuyển đổi
Phương thức này có thể được sử dụng để bật chế độ cửa sổ theo cách thủ công
trình diễn
Phương thức này có thể được sử dụng để mở một cửa sổ phương thức theo cách thủ công
trốn
Phương thức này có thể được sử dụng để ẩn một cửa sổ phương thức theo cách thủ công
xử lýCập nhật
Phương thức này điều chỉnh lại vị trí của modal để chống lại các hiện tượng giật xảy ra do sự xuất hiện của thanh cuộn các khung nhìn trong trường hợp chiều nếu chiều cao của modal cao hơn chiều cao của khung nhìn khi nó đang mở
Một ví dụ phổ biến của trường hợp này là hiển thị các phần tử ẩn bên trong phương thức thông qua JavaScript hoặc tải nội dung bên trong phương thức bằng Ajax sau khi kích hoạt
vứt bỏ
Phương thức hủy bỏ phương thức này của một phần tử (tức là loại bỏ dữ liệu được lưu trữ trên phần tử DOM)
getInstance
Đây là một phương thức tĩnh cho phép bạn có thể thực hiện phương thức được liên kết với một phần tử DOM
getOrCreateInstance
Đây là một phương thức tĩnh cho phép bạn lấy thể hiện của phương thức được liên kết với một phần tử DOM hoặc tạo một thể hiện mới trong trường hợp nếu phương thức chưa được khởi động
mẹo. Các phương thức tĩnh không thể được gọi trên các thể hiện của lớp (tức là các đối tượng). Họ được gọi trực tiếp từ lớp. Từ khóa
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
2 được sử dụng để định nghĩa một phương thức tĩnh cho một lớp
The event of modal
Class modal of Bootstrap bao gồm một số sự kiện để kết nối vào chức năng modal
Sự kiện Mô tả hiển thị. bs. modal Sự kiện này kích hoạt ngay lập tức khi phương thức
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
6 được gọi. cho xem. bs. modal Sự kiện này được kích hoạt khi modal đã được hiển thị cho người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi được kích hoạt. trốn. bs. modal Sự kiện này được kích hoạt ngay lập tức khi phương thức
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
7 được gọi. ẩn giấu. bs. modal Sự kiện này được kích hoạt khi modal hoàn tất bị ẩn khỏi người dùng. Nó sẽ đợi cho đến khi quá trình chuyển đổi CSS hoàn tất trước khi được kích hoạt. ẩnNgăn chặn. bs. modal Sự kiện này được kích hoạt khi modal được hiển thị, tùy chọn
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
3 của nó được đặt thành
Send Us a Message
First Name
Last Name
Comments
Cancel Send Email
2 và một lần nhấp chuột bên ngoài phương thức được thực hiện hoặc tùy chọn Launch Demo Modal
Ajax Loading Demo
Close OK, Got it!
0 được đặt thành Launch Demo Modal
Ajax Loading Demo
Close OK, Got it!
1 và thực hiện nhấn phím esc