Phương thức hiển thị không hoạt động Bootstrap 5

Thay đổi kích thước của modal bằng cách thêm lớp

32 cho modal nhỏ, lớp

33 cho modal lớn hoặc

34 cho modal cực lớn

Thêm lớp kích thước vào

phần tử với lớp

35

Theo mặc định, các phương thức có kích thước "trung bình"

---

Trung tâm phương thức

Căn giữa phương thức theo chiều dọc và chiều ngang trong trang, với lớp

36

---

Phương thức cuộn

Khi bạn có nhiều nội dung bên trong phương thức, một thanh cuộn sẽ được thêm vào trang. Xem các ví dụ dưới đây để hiểu nó

Tuy nhiên, chỉ có thể cuộn bên trong phương thức, thay vì chính trang đó, bằng cách thêm

37 vào

35

---

Hoàn thành tài liệu tham khảo phương thức Bootstrap

Để có tham khảo đầy đủ về tất cả các tùy chọn, phương thức và sự kiện phương thức, hãy truy cập Tham khảo phương thức Bootstrap JS của chúng tôi

Xin chào, tôi đang gặp sự cố với các phương thức trong bootstrap. Nó sẽ không chuyển đổi. Head

Scripts

Modal / mã kích hoạt

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

Tôi đã thử tải tất cả các tập lệnh từ CDN, tất cả từ gói và cũng sao chép/dán mã trực tiếp từ các ví dụ. Nếu tôi mở tệp và xóa màn hình. không, phương thức hiển thị tốt, nhưng tôi không thể đóng hoặc kích hoạt nó từ nút. Nó dường như có liên quan đến sự mờ dần

---

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

• Các phương thức được xây dựng bằng HTML, CSS và JavaScript. Chúng được định vị trên mọi thứ khác trong tài liệu và xóa cuộn khỏi để thay vào đó, nội dung phương thức sẽ cuộn
• Nhấp vào "phông nền" của phương thức sẽ tự động đóng phương thức
• Bootstrap chỉ hỗ trợ một cửa sổ phương thức tại một thời điểm. Các phương thức lồng nhau không được hỗ trợ vì chúng tôi tin rằng chúng mang lại trải nghiệm người dùng kém
• Các phương thức sử dụng

  
  
    Launch demo modal
  
  
  
  
    
  
      
  
        
  
          Modal title
          
        
        
  
          ...
        
        
  
          Close
          Save changes
        
      
  
    
  
  
  

  4, đôi khi có thể hơi đặc biệt về cách hiển thị của nó. Bất cứ khi nào có thể, hãy đặt HTML phương thức của bạn ở vị trí cấp cao nhất để tránh khả năng can thiệp từ các phần tử khác. Bạn có thể gặp sự cố khi lồng một

  
  
    Launch demo modal
  
  
  
  
    
  
      
  
        
  
          Modal title
          
        
        
  
          ...
        
        
  
          Close
          Save changes
        
      
  
    
  
  
  

  5 trong một phần tử cố định khác
• Một lần nữa, do

  
  
    Launch demo modal
  
  
  
  
    
  
      
  
        
  
          Modal title
          
        
        
  
          ...
        
        
  
          Close
          Save changes
        
      
  
    
  
  
  

  4, có một số lưu ý khi sử dụng phương thức trên thiết bị di động. Xem tài liệu hỗ trợ trình duyệt của chúng tôi để biết chi tiết
• Do cách HTML5 xác định ngữ nghĩa của nó, thuộc tính HTML

  
  
    Launch demo modal
  
  
  
  
    
  
      
  
        
  
          Modal title
          
        
        
  
          ...
        
        
  
          Close
          Save changes
        
      
  
    
  
  
  

  7 không có tác dụng trong các phương thức Bootstrap. Để đạt được hiệu quả tương tự, hãy sử dụng một số JavaScript tùy chỉnh

const myModal = document.getElementById('myModal')
const myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', () => {
  myInput.focus()
})

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ức

Dưới đây là một ví dụ về phương thức tĩnh (có nghĩa là

  Launch demo modal




  

    

      

        Modal title
        
      
      

        ...
      
      

        Close
        Save changes
      
    

  

8 và

  Launch demo modal




  

    

      

        Modal title
        
      
      

        ...
      
      

        Close
        Save changes
      
    

  

9 của nó đã bị ghi đè). Bao gồm tiêu đề phương thức, nội dung phương thức (bắt buộc đối với

00) và chân trang phương thức (tùy chọn). Chúng tôi yêu cầu bạn bao gồm các tiêu đề phương thức với các hành động loại bỏ bất cứ khi nào có thể hoặc cung cấp một hành động loại bỏ rõ ràng khác

Văn bản nội dung phương thức ở đây

1

Trong ví dụ tĩnh trên, chúng tôi sử dụng

, để tránh các sự cố với hệ thống phân cấp tiêu đề trong trang tài liệu. Tuy nhiên, về mặt cấu trúc, một hộp thoại phương thức đại diện cho tài liệu/ngữ cảnh riêng biệt của nó, vì vậy, lý tưởng nhất là

01 phải là một

Nếu cần, bạn có thể sử dụng các tiện ích cỡ chữ để kiểm soát sự xuất hiện của tiêu đề. Tất cả các ví dụ trực tiếp sau đây sử dụng phương pháp này

Bản thử trực tiếp

Chuyể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

Woo-hoo, bạn đang đọc văn bản này trong một phương thức

  Launch demo modal




  

    

      

        Modal title
        
      
      

        ...
      
      

        Close
        Save changes
      
    

  

phông nền tĩnh

Khi 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 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

0

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

02 vào

03

Đâ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

7

Căn giữa theo chiều dọc

Thêm

04 vào

03 để căn giữa phương thức theo chiều dọc

Đâ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

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

0

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ỏ

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

1

Sử dụng lưới

Sử dụng hệ thống lưới Bootstrap trong một phương thức bằng cách lồng

06 vào trong

07. Sau đó, sử dụng các lớp hệ thống lưới thông thường như bạn làm ở bất kỳ nơi nào khác

Cấp độ 1. . col-sm-9

Cấp độ 2. . col-8. col-sm-6

Cấp độ 2. . col-4. col-sm-6

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        




        
    

4

Thay đổi nội dung phương thức

Có 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, hãy đọc các tài liệu về sự kiện phương thức để biết chi tiết về

70

Mở phương thức cho @mdo Mở phương thức cho @fat Mở phương thức cho @getbootstrap

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

8

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

9

Chuyển đổi giữa các phương thức

Chuyể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

71 và

72. Ví dụ: bạn có thể chuyển đổi phương thức đặt lại mật khẩu từ bên trong phương thức đăng nhập đã mở. Xin lưu ý rằng không thể mở nhiều phương thức cùng một lúc—phương thức này chỉ đơn giản là chuyển đổi giữa hai phương thức riêng biệt

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

Mở phương thức đầu tiên

10

Thay đổi hoạt ảnh

Biến

73 xác định trạng thái biến đổi của

03 trước hoạt ảnh tăng dần theo phương thức, biến

75 xác định biến đổi của

03 ở cuối hoạt ảnh tăng dần theo chế độ

Ví dụ, nếu bạn muốn một hoạt ảnh phóng to, bạn có thể đặt

77

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

78 khỏi đánh dấu phương thức của bạn

11

Độ cao động

Nếu chiều cao của một modal thay đổi khi nó đang mở, bạn nên gọi

79 để điều chỉnh lại vị trí của modal trong trường hợp thanh cuộn xuất hiện

khả năng tiếp cận

Đảm bảo thêm

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

00, tham chiếu tiêu đề phương thức, vào

  Launch demo modal




  

    

      

        Modal title
        
      
      

        ...
      
      

        Close
        Save changes
      
    

  

5. Ngoài ra, bạn có thể đưa ra mô tả về hộp thoại phương thức của mình với

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

02 trên

  Launch demo modal




  

    

      

        Modal title
        
      
      

        ...
      
      

        Close
        Save changes
      
    

  

5. Lưu ý rằng bạn không cần thêm

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

04 vì chúng tôi đã thêm nó qua JavaScript

Nhúng video YouTube

Nhú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ọn

Cá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

03. Các kích thước này bắt đầu tại các điểm dừng nhất định để tránh các thanh cuộn ngang trên các khung nhìn hẹp hơn

SizeClassModal chiều rộng tối đaNhỏ

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

06

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

07Mặc địnhKhông có

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

08Lớn

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

09

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

10Cực lớn

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

11

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

12

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ỏ

12

Chế độ toàn màn hình

Mộ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

03

Lớp học có sẵn

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

14Luôn luôn

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

15

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

16

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

17

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

18

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

19

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

40

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

41

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

42

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

43

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

44

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

13

CSS

Biến

Đã thêm vào v5. 2. 0

Là một phần trong cách tiếp cận các biến CSS đang phát triển của Bootstrap, các phương thức hiện sử dụng các biến CSS cục bộ trên

  Launch demo modal




  

    

      

        Modal title
        
      
      

        ...
      
      

        Close
        Save changes
      
    

  

5 và

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

46 để tùy chỉnh theo thời gian thực nâng cao. Các giá trị cho các biến CSS được đặt thông qua Sass, do đó tùy chỉnh Sass cũng vẫn được hỗ trợ

14

15

biến sass

16

Vòng

Chế độ toàn màn hình đáp ứng được tạo thông qua bản đồ

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

47 và một vòng lặp trong

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

48

17

Cách sử dụng

Plugin 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

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

46 để cung cấp vùng nhấp để loại bỏ các phương thức được hiển thị khi nhấp vào bên ngoài phương thức

Thông qua thuộc tính dữ liệu

chuyển đổi

Kích hoạt một phương thức mà không cần viết JavaScript. Đặt

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

80 trên thành phần bộ điều khiển, chẳng hạn như nút, cùng với

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

81 hoặc

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

82 để nhắm mục tiêu một phương thức cụ thể để chuyển đổi

18

Miễn nhiệm

Có thể loại bỏ bằng thuộc tính

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

83 trên một nút trong phương thức như minh họa bên dưới

19

hoặc trên một nút bên ngoài phương thức bằng cách sử dụng

71 như minh họa bên dưới

19

Qua JavaScript

Tạo một phương thức với một dòng JavaScript

  Launch demo modal




  

    

      

        Modal title
        
      
      

        ...
      




      

        Close
        Save changes
      
    

  

1

Tùy chọn

Vì các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript, bạn có thể thêm tên tùy chọn vào

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

85, như trong

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

86. Đảm bảo thay đổi kiểu chữ hoa chữ thường của tên tùy chọn từ “camelCase” thành “kebab-case” khi chuyển các tùy chọn qua thuộc tính dữ liệu. Ví dụ: sử dụng

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

87 thay vì

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

88

Kể từ Bootstrap 5. 2. 0, tất cả các thành phần đều hỗ trợ thuộc tính dữ liệu dành riêng thử nghiệm

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

89 có thể chứa cấu hình thành phần đơn giản dưới dạng chuỗi JSON. Khi một phần tử có các thuộc tính

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

90 và

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

91, giá trị cuối cùng của

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

92 sẽ là

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

93 và các thuộc tính dữ liệu riêng biệt sẽ ghi đè các giá trị được cung cấp trên

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

89. Ngoài ra, các thuộc tính dữ liệu hiện có có thể chứa các giá trị JSON như

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

95

NameTypeDefaultDescription_______296boolean,

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

97

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

98Bao gồm phần tử phông nền phương thức. Ngoài ra, chỉ định

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

99 cho phông nền không đóng chế độ khi nhấp vào.

100boolean

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

98Đặt tiêu điểm vào phương thức khi được khởi tạo.

102boolean

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

98Đóng chế độ khi nhấn phím thoát

phương pháp

Cá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

tùy chọn vượt qua

Kí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

104

  Launch demo modal




  

    

      

        Modal title
        
      
      

        ...
      
      

        Close
        Save changes
      
    

  

2

MethodDescription

105Destroys một phần tử modal. (Xóa dữ liệu được lưu trữ trên phần tử DOM)____1106Phương thức tĩnh cho phép bạn lấy thể hiện phương thức được liên kết với phần tử DOM.

107Phươ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.

108Đ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).

109Ẩn modal 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

110 xảy ra).

111Mở 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

112 xảy ra). 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

70). (tôi. e.

114.

115Chuyển đổi 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ị hoặc ẩn (i. e. trước khi sự kiện

112 hoặc

110 xảy ra)

Sự kiện

Lớ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

)

Mô tả sự kiện

118Sự kiện này được kích hoạt ngay lập tức khi phương thức đối tượng

109 được gọi.

110Sự kiện này được kích hoạt khi chế độ đã hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).

121Sự kiện này được kích hoạt khi phương thức được hiển thị, phông nền của nó là

    
        
    




    

        
        

            
            

                
                    ×
                
                
Modal title
            

            
            

                ...
            
            
            

                Close
                Save changes
            
        

        
    

99 và một lần nhấp bên ngoài phương thức được thực hiện. Sự kiện này cũng được kích hoạt khi nhấn phím thoát và tùy chọn

102 được đặt thành

124.

125Sự kiện này kích hoạt ngay lập tức khi phương thức đối tượng

111 được gọi. Nếu do nhấp chuột gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc tính

70 của sự kiện.

112Sự kiện này được kích hoạt khi phương thức được hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất). Nếu do nhấp chuột gây ra, phần tử được nhấp sẽ có sẵn dưới dạng thuộc tính

70 của sự kiện

Làm cách nào để hiển thị phương thức trong Bootstrap 5?