Làm cách nào để ngăn phương thức đóng khi nhấp vào bên ngoài?
|
Trước khi bắt đầu với thành phần phương thức của Bootstrap, hãy nhớ đọc phần sau vì các tùy chọn menu của chúng tôi đã thay đổi gần đây Show
Tiếp tục đọc các bản demo và hướng dẫn sử dụng ví dụthành phần phương thứcDưới đây là một ví dụ về phương thức tĩnh (có nghĩa là Văn bản nội dung phương thức ở đây Bản thử trực tiếpChuyển đổi bản trình diễn phương thức đang hoạt động bằng cách nhấp vào nút bên dưới. Nó sẽ trượt xuống và mờ dần từ đầu trang Tuyệt vời, bạn đang đọc văn bản này trong một phương thức phông nền tĩnhKhi phông nền được đặt thành tĩnh, phương thức sẽ không đóng khi nhấp vào bên ngoài phông nền. Nhấp vào nút bên dưới để dùng thử Tôi sẽ không đóng nếu bạn nhấp vào bên ngoài tôi. Thậm chí đừng cố nhấn phím thoát Khởi chạy phương thức phông nền tĩnh Khi các phương thức trở nên quá dài đối với chế độ xem hoặc thiết bị của người dùng, chúng sẽ cuộn độc lập với chính trang đó. Hãy thử bản demo bên dưới để xem chúng tôi muốn nói gì Đây là một số nội dung giữ chỗ để hiển thị hành vi cuộn cho các phương thức. Thay vì lặp lại văn bản theo phương thức, chúng tôi sử dụng kiểu nội tuyến đặt chiều cao tối thiểu, do đó kéo dài độ dài của phương thức tổng thể và thể hiện cuộn tràn. Khi nội dung trở nên dài hơn chiều cao của chế độ xem, thao tác cuộn sẽ di chuyển phương thức khi cần Bạn cũng có thể tạo một phương thức có thể cuộn cho phép cuộn phần thân của phương thức bằng cách thêm Đây là một số nội dung giữ chỗ để hiển thị hành vi cuộn cho các phương thức. Chúng tôi sử dụng các ngắt dòng lặp đi lặp lại để chứng minh cách nội dung có thể vượt quá chiều cao bên trong tối thiểu, do đó hiển thị cuộn bên trong. Khi nội dung trở nên dài hơn chiều cao tối đa được xác định trước của phương thức, nội dung sẽ bị cắt và có thể cuộn được trong phương thức Nội dung này sẽ xuất hiện ở dưới cùng sau khi bạn cuộn Căn giữa theo chiều dọcThêm Đây là một phương thức tập trung theo chiều dọc Đây là một số nội dung giữ chỗ để hiển thị phương thức tập trung theo chiều dọc. Chúng tôi đã thêm một số bản sao bổ sung ở đây để hiển thị cách thức hoạt động của phương thức định tâm theo chiều dọc khi được kết hợp với các phương thức có thể cuộn. Chúng tôi cũng sử dụng một số ngắt dòng lặp lại để nhanh chóng kéo dài chiều cao của nội dung, do đó kích hoạt thao tác cuộn. Khi nội dung trở nên dài hơn chiều cao tối đa được xác định trước của phương thức, nội dung sẽ bị cắt và có thể cuộn được trong phương thức cứ thế Phương thức có thể cuộn được căn giữa theo chiều dọc Phương thức có thể cuộn được căn giữa theo chiều dọc Chú giải công cụ và cửa sổ bật lên có thể được đặt trong các phương thức khi cần. Khi các phương thức bị đóng, mọi chú giải công cụ và cửa sổ bật lên bên trong cũng sẽ tự động bị loại bỏ Sử dụng lướiSử dụng hệ thống lưới Bootstrap trong một phương thức bằng cách lồng Cấp độ 1. . col-sm-9 Cấp độ 2. . col-8. col-sm-6 Cấp độ 2. . col-4. col-sm-6 Thay đổi nội dung phương thứcCó một loạt các nút kích hoạt cùng một phương thức với nội dung hơi khác nhau? Dưới đây là bản trình diễn trực tiếp theo sau là ví dụ về HTML và JavaScript. Để biết thêm thông tin, để biết chi tiết về Mở phương thức cho @mdo Mở phương thức cho @fat Mở phương thức cho @getbootstrap Chuyển đổi giữa các phương thứcChuyển đổi giữa nhiều phương thức với một số vị trí thông minh của các thuộc tính Hiển thị phương thức thứ hai và ẩn phương thức này bằng nút bên dưới Ẩn phương thức này và hiển thị phương thức đầu tiên bằng nút bên dưới Thay đổi hoạt ảnhBiến Ví dụ, nếu bạn muốn một hoạt ảnh phóng to, bạn có thể đặt Xóa hoạt ảnhĐối với các phương thức chỉ xuất hiện thay vì mờ dần để xem, hãy xóa lớp Độ cao độngNếu chiều cao của một modal thay đổi khi nó đang mở, bạn nên gọi khả năng tiếp cậnĐảm bảo thêm Nhúng video YouTubeNhúng video YouTube vào các phương thức yêu cầu JavaScript bổ sung không có trong Bootstrap để tự động dừng phát lại và hơn thế nữa. Xem bài đăng Stack Overflow hữu ích này để biết thêm thông tin Kích thước tùy chọnCác phương thức có ba kích thước tùy chọn, có sẵn thông qua các lớp bổ trợ được đặt trên một Phương thức mặc định của chúng tôi không có lớp sửa đổi cấu thành phương thức kích thước “trung bình” Phương thức cực lớn Phương thức lớn Phương thức nhỏ Chế độ toàn màn hìnhMột ghi đè khác là tùy chọn bật lên một phương thức bao phủ chế độ xem của người dùng, có sẵn thông qua các lớp bổ trợ được đặt trên một Full màn hình Full màn hình dưới sm Full màn hình dưới md Full màn hình dưới lg Full màn hình dưới xl Full màn hình dưới xxl ngổ ngáoBiếnVòngđược tạo thông qua bản đồ ________ 195 và một vòng lặp trong ________ 196 Cách sử dụngPlugin phương thức chuyển đổi nội dung ẩn của bạn theo yêu cầu, thông qua thuộc tính dữ liệu hoặc JavaScript. Nó cũng ghi đè hành vi cuộn mặc định và tạo một Thông qua thuộc tính dữ liệuchuyển đổiKích hoạt một phương thức mà không cần viết JavaScript. Đặt Miễn nhiệmCó thể loại bỏ bằng thuộc tính hoặc trên một nút bên ngoài phương thức sử dụng Qua JavaScriptTạo một phương thức với một dòng JavaScript Tù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 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 . tùy chọn vượt quaKích hoạt nội dung của bạn dưới dạng phương thức. Chấp nhận một tùy chọn tùy chọn chuyển đổiBật/tắt chế độ theo cách thủ công. Trả về người gọi trước khi phương thức thực sự được hiển thị hoặc ẩn (i. e. trước khi sự kiện trình diễnMở một phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự được hiển thị (i. e. trước khi sự kiện Ngoài ra, bạn có thể chuyển một phần tử DOM làm đối số có thể nhận được trong các sự kiện phương thức (dưới dạng thuộc tính ẩn giấuẨn phương thức theo cách thủ công. Trả về người gọi trước khi phương thức thực sự bị ẩn (i. e. trước khi sự kiện xử lýCập nhậtĐiều chỉnh lại vị trí của phương thức theo cách thủ công nếu chiều cao của phương thức thay đổi khi nó đang mở (i. e. trong trường hợp một thanh cuộn xuất hiện) vứt bỏPhá hủy phương thức của một phần tử. (Xóa dữ liệu được lưu trữ trên phần tử DOM) getInstancePhương thức tĩnh cho phép bạn lấy phiên bản phương thức được liên kết với phần tử DOM getOrCreateInstancePhương thức tĩnh cho phép bạn lấy phiên bản phương thức được liên kết với phần tử DOM hoặc tạo một phiên bản mới trong trường hợp nó không được khởi tạo Sự kiệnLớp phương thức của Bootstrap hiển thị một số sự kiện để nối vào chức năng phương thức. Tất cả các sự kiện phương thức được kích hoạt tại chính phương thức đó (i. e. tại Làm cách nào để ngăn phương thức đóng khi nhấp vào bên ngoài js?Khi sử dụng javascript, bạn sẽ phải đặt bàn phím thành false để ngăn đóng bằng cách nhấn ESC. . lưu ý rằng việc lập bảng vẫn được bật trong nền. . Tôi thường sử dụng $("#myModal"). phương thức ("hiển thị"); Làm cách nào để ngăn phương thức đóng khi nhấp vào bên ngoài Bootstrap?Phông nền tĩnh
. Nhấp vào nút bên dưới để dùng thử. When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it. |
