With code on haveid of thehộp thoại là Show
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 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 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  mẹo. Luôn cố gắng đặt HTML phương thức của bạn ở vị trí cấp cao nhất trong tài liệu của bạn, tốt nhất là trước khi đóng thẻ (tức là ) để tránh có thể bị từ chối từ các phần tử khác, nếu nó không thể ảnh hưởng đến giao tiếp Kích hoạt Modal thông qua thuộc tính DataBạn có thể kích hoạt Bootstrap Modal bằng cách nhấp vào nút hoặc liên kết thông qua dữ liệu thuộc tính mà không cần viết bất kỳ mã JavaScript nào. Vui lòng xem ví dụ sau để xem nó hoạt động như thế nào 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
Phần còn lại của vấn đề là tự giải thích, chẳng hạn như phần tử Lưu ý. Lớp1 trên phần tử Kích hoạt Modal bằng JavaScriptBạ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 Change the size of ModalBootstrap 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 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ạtThườ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 Create modal căn giữa theo chiều dọcChỉ cần thêm lớp Sử dụng lưới bên trong phương thứcBạ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 Tải nội dung trong phương thức bằng AjaxBạ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 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ọnCó một số tùy chọn nhất định có thể truyền cho phương thức Để đặ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 TênKiểuGiá trị mặc địnhMô tảbackdropboolean Thuộ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 The method of modalThis is the normal method of bootstrap Truyền các tùy chọn cho phương thứcNgoà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 đổiPhươ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ễnPhươ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ốnPhươ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ậtPhươ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óa2 được sử dụng để định nghĩa một phương thức tĩnh cho một lớp The event of modalClass 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 |
