Lịch sự kiện bootstrap 5
Tài liệu và ví dụ về cách thêm cửa sổ bật lên Bootstrap, giống như cửa sổ bật lên trong iOS, vào bất kỳ thành phần nào trên trang web của bạn Show Tổng quanNhững điều cần biết khi sử dụng plugin popover
Tiếp tục đọc để xem cách cửa sổ bật lên hoạt động với một số ví dụ Thí dụ. Kích hoạt cửa sổ bật lên ở mọi nơiMột cách để khởi tạo tất cả các cửa sổ bật lên trên một trang là chọn chúng theo thuộc tính 7 của chúng 1Thí dụ. Sử dụng tùy chọn Click to toggle popover8Khi bạn có một số kiểu trên phần tử gốc can thiệp vào cửa sổ bật lên, bạn sẽ muốn chỉ định một 8 tùy chỉnh để thay vào đó, HTML của cửa sổ bật lên xuất hiện trong phần tử đó
Thí dụ
bốn hướngBốn tùy chọn có sẵn. căn trên, phải, dưới và trái Popover ở trên Popover ở bên phải Popover ở dưới Popover ở bên trái 6Bỏ qua lần nhấp tiếp theoSử dụng trình kích hoạt 60 để loại bỏ cửa sổ bật lên trong lần nhấp tiếp theo của người dùng vào một phần tử khác với phần tử chuyển đổiYêu cầu đánh dấu cụ thể để loại bỏ khi nhấp vào lần nhấp tiếp theoĐể có hành vi đa nền tảng và trình duyệt phù hợp, bạn phải sử dụng thẻ 6, không phải thẻ và bạn cũng phải bao gồm thuộc tính 62 0 1yếu tố bị vô hiệu hóaCác phần tử có thuộc tính 4 không tương tác, nghĩa là người dùng không thể di chuột hoặc nhấp vào chúng để kích hoạt cửa sổ bật lên (hoặc chú giải công cụ). Như một giải pháp thay thế, bạn sẽ muốn kích hoạt cửa sổ bật lên từ trình bao bọchoặc 6 và ghi đè 65 trên phần tử bị vô hiệu hóaĐối với các trình kích hoạt cửa sổ bật lên bị vô hiệu hóa, bạn cũng có thể chọn 66 để cửa sổ bật lên xuất hiện dưới dạng phản hồi trực quan ngay lập tức cho người dùng của bạn vì họ có thể không muốn nhấp vào phần tử bị vô hiệu hóa 6Cách sử dụngKích hoạt cửa sổ bật lên qua JavaScript 7Tùy chọnCác tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào 67, như trong 68NameTypeDefaultDescriptionanimationbooleantrueÁp dụng chuyển đổi mờ dần CSS cho chuỗi popovercontainer. yếu tố. sai sự thậtNối popover vào một phần tử cụ thể. Thí dụ. 2. Tùy chọn này đặc biệt hữu ích vì nó cho phép bạn định vị cửa sổ bật lên trong luồng tài liệu gần phần tử kích hoạt - điều này sẽ ngăn cửa sổ bật lên trôi ra khỏi phần tử kích hoạt trong khi thay đổi kích thước cửa sổchuỗi nội dung. yếu tố. hàm số''Giá trị nội dung mặc định nếu không có thuộc tính 00Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu 01 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vàosố chậm trễ. đối tượng0Độ trễ hiển thị và ẩn cửa sổ bật lên (ms) - không áp dụng cho loại trình kích hoạt thủ công Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn/hiện Cấu trúc đối tượng là. 02htmlbooleanfalseChèn HTML vào cửa sổ bật lên. Nếu sai, phương thức 03 của jQuery sẽ được sử dụng để chèn nội dung vào DOM. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS. chuỗi vị trí. chức năng'đúng'Cách định vị cửa sổ bật lên - tự động. đứng đầu. đáy. bên trái. đúng. 04 được chỉ định, nó sẽ tự động định hướng lại cửa sổ bật lên. Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM cửa sổ bật lên làm đối số đầu tiên và nút DOM phần tử kích hoạt làm đối số thứ hai. Bối cảnh 01 được đặt thành phiên bản popoverchuỗi chọn. falsefalseNếu bộ chọn được cung cấp, các đối tượng bật lên sẽ được ủy quyền cho các mục tiêu đã chỉ định. Trong thực tế, điều này được sử dụng để cho phép nội dung HTML động có thêm cửa sổ bật lên. Xem cái này và một ví dụ thông tin. chuỗi mẫu 06HTML cơ sở để sử dụng khi tạo cửa sổ bật lên 0 của popover sẽ được đưa vào 08 1 của cửa sổ bật lên sẽ được đưa vào 10 11 sẽ trở thành mũi tên của popoverPhần tử bao ngoài cùng phải có lớp 12chuỗi tiêu đề. yếu tố. hàm số''Giá trị tiêu đề mặc định nếu không có thuộc tính 0Nếu một hàm được cung cấp, nó sẽ được gọi với tham chiếu 01 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào 15, 16, 17 hoặc tham chiếu HTMLElement (chỉ dành cho JavaScript). Để biết thêm thông tin tham khảo Popper. tài liệu ngăn chặn dòng chảy của jsThuộc tính dữ liệu cho các cửa sổ bật lên riêng lẻNgoài ra, các tùy chọn cho các cửa sổ bật lên riêng lẻ có thể được chỉ định thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên phương phápCác phương thức và chuyển tiếp không đồng bộTất cả các phương thức API đều không đồng bộ và bắt đầu quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin
$(function () {
$('.example-popover').popover({
container: 'body'
})
}) |