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

  • 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

    5, đôi khi có thể hơi cụ thể 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

    6 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

    5, có một số lưu ý khi sử dụng phương thức trên thiết bị di động. để biết chi tiết
  • Do cách HTML5 xác định ngữ nghĩa của nó, 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

var myModal = document.getElementById['myModal']
var myInput = document.getElementById['myInput']

myModal.addEventListener['shown.bs.modal', function [] {
  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

9 và


  Launch static backdrop modal



Modal title

...

Close Understood

0 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


  Launch static backdrop modal



Modal title

...

Close Understood

1] 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

Modal title

Modal body text goes here.

Close Save changes

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

Tuyệt vời, 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 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



  Launch static backdrop modal



Modal title

...

Close Understood

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



  Launch static backdrop modal



Modal title

...

Close Understood

2 vào


  Launch static backdrop modal



Modal title

...

Close Understood

3

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



  Launch demo modal



Modal title

...

Close Save changes

2

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

Thêm



  Launch static backdrop modal



Modal title

...

Close Understood

4 vào


  Launch static backdrop modal



Modal title

...

Close Understood

3 để 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



  Launch demo modal



Modal title

...

Close Save changes

5

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ỏ



  Launch demo modal



Modal title

...

Close Save changes

6

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



  Launch static backdrop modal



Modal title

...

Close Understood

6 vào trong


  Launch static backdrop modal



Modal title

...

Close Understood

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



  Launch demo modal



Modal title

...

Close Save changes

9

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, để biết chi tiết về



  Launch demo modal



Modal title

...

Close Save changes

20

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



  Launch demo modal



Modal title

...

Close Save changes

3



  Launch demo modal



Modal title

...

Close Save changes

4

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



  Launch demo modal



Modal title

...

Close Save changes

21 và


  Launch demo modal



Modal title

...

Close Save changes

22. 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

Modal title

Modal body text goes here.

Close Save changes

0

Thay đổi hoạt ảnh

Biến



  Launch demo modal



Modal title

...

Close Save changes

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


  Launch static backdrop modal



Modal title

...

Close Understood

3 trước hoạt ảnh tăng dần theo chế độ, biến


  Launch demo modal



Modal title

...

Close Save changes

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


  Launch static backdrop modal



Modal title

...

Close Understood

3 ở 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



  Launch demo modal



Modal title

...

Close Save changes

27

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



  Launch demo modal



Modal title

...

Close Save changes

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

Modal title

Modal body text goes here.

Close Save changes

1

Độ cao động

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



  Launch demo modal



Modal title

...

Close Save changes

29 để đ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



  Launch demo modal



Modal title

...

Close Save changes

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


  Launch demo modal



Modal title

...

Close Save changes

6. 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


  Launch demo modal



Modal title

...

Close Save changes

52 trên


  Launch demo modal



Modal title

...

Close Save changes

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


  Launch demo modal



Modal title

...

Close Save changes

54 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



  Launch static backdrop modal



Modal title

...

Close Understood

3. 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ỏ


  Launch demo modal



Modal title

...

Close Save changes

56


  Launch demo modal



Modal title

...

Close Save changes

57Mặc địnhKhông có


  Launch demo modal



Modal title

...

Close Save changes

58Lớn


  Launch demo modal



Modal title

...

Close Save changes

59


  Launch demo modal



Modal title

...

Close Save changes

60Cực lớn


  Launch demo modal



Modal title

...

Close Save changes

61


  Launch demo modal



Modal title

...

Close Save changes

62

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ỏ

Modal title

Modal body text goes here.

Close Save changes

2

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



  Launch static backdrop modal



Modal title

...

Close Understood

3

Lớp học có sẵn_______164Luôn luôn


  Launch demo modal



Modal title

...

Close Save changes

65Dưới đây


  Launch demo modal



Modal title

...

Close Save changes

66


  Launch demo modal



Modal title

...

Close Save changes

67Dưới đây


  Launch demo modal



Modal title

...

Close Save changes

68


  Launch demo modal



Modal title

...

Close Save changes

69Dưới đây


  Launch demo modal



Modal title

...

Close Save changes

90


  Launch demo modal



Modal title

...

Close Save changes

91Dưới đây


  Launch demo modal



Modal title

...

Close Save changes

92


  Launch demo modal



Modal title

...

Close Save changes

93Dưới đây


  Launch demo modal



Modal title

...

Close Save changes

94

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

Modal title

Modal body text goes here.

Close Save changes

3

ngổ ngáo

Biến

Modal title

Modal body text goes here.

Close Save changes

4

Vòng

được tạo thông qua bản đồ ________ 195 và một vòng lặp trong ________ 196

Modal title

Modal body text goes here.

Close Save changes

5

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 một



  Launch demo modal



Modal title

...

Close Save changes

97 để cung cấp vùng nhấp chuột để 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



  Launch demo modal



Modal title

...

Close Save changes

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


  Launch demo modal



Modal title

...

Close Save changes

99 hoặc


  Launch demo modal



Modal title

...

Close Save changes

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

Modal title

Modal body text goes here.

Close Save changes

6

Miễn nhiệm

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



  Launch demo modal



Modal title

...

Close Save changes

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

Modal title

Modal body text goes here.

Close Save changes

7

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



  Launch demo modal



Modal title

...

Close Save changes

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

Modal title

Modal body text goes here.

Close Save changes

7

Qua JavaScript

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

Modal title

Modal body text goes here.

Close Save changes

9

Tùy chọn

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



  Launch demo modal



Modal title

...

Close Save changes

33, như trong


  Launch demo modal



Modal title

...

Close Save changes

34

NameTypeDefaultDescription_______235boolean hoặc chuỗi


  Launch demo modal



Modal title

...

Close Save changes

36


  Launch demo modal



Modal title

...

Close Save changes

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


  Launch demo modal



Modal title

...

Close Save changes

38 cho phông nền không đóng chế độ khi nhấp.


  Launch demo modal



Modal title

...

Close Save changes

39boolean


  Launch demo modal



Modal title

...

Close Save changes

37Đóng phương thức khi nhấn phím thoát


  Launch demo modal



Modal title

...

Close Save changes

41boolean


  Launch demo modal



Modal title

...

Close Save changes

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

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

.

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



  Launch demo modal



Modal title

...

Close Save changes

43



  Launch demo modal



Modal title

...

Close Save changes

0

chuyển đổi

Bậ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



  Launch demo modal



Modal title

...

Close Save changes

44 hoặc


  Launch demo modal



Modal title

...

Close Save changes

45 xảy ra]

trình diễn

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



  Launch demo modal



Modal title

...

Close Save changes

44 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



  Launch demo modal



Modal title

...

Close Save changes

20]



  Launch demo modal



Modal title

...

Close Save changes

1

ẩ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



  Launch demo modal



Modal title

...

Close Save changes

45 xảy ra]

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]

getInstance

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



  Launch demo modal



Modal title

...

Close Save changes

2

getOrCreateInstance

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



  Launch demo modal



Modal title

...

Close Save changes

3

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

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.

Chủ Đề