Cửa sổ bật lên và hộp thoại

Popover là mọi phần tử có thuộc tính popover và hữu ích cho nhiều mẫu tương tác, bao gồm cả chú giải công cụ, cảnh báo, thông báo tạm thời, v.v.

<div id="my-popover" popover>My popover content</div>

Thuộc tính popover ẩn phần tử theo mặc định và bạn phải cung cấp cho người dùng cách mở phần tử đó. Mặc dù được đặt ở lớp trên cùng, phía trên tất cả nội dung khác, nhưng các cửa sổ bật lên không phải là phương thức. Điều này có nghĩa là bạn vẫn có thể tương tác với nội dung bên ngoài cửa sổ bật lên.

Kiểm soát cửa sổ bật lên

Trước khi tìm hiểu các loại cửa sổ bật lên và cách hoạt động của chúng, hãy xem cách mở và đóng cửa sổ bật lên.

Khai báo

Bạn có thể kiểm soát hoàn toàn các cửa sổ bật lên trong HTML mà không cần dùng JavaScript, bằng cách sử dụng các nút (và đầu vào có loại button) và thuộc tính popovertarget.

Popover trong đoạn mã trước có một id là my-popover và bạn có thể dùng mã này để tham chiếu đến popover.

<button popovertarget="my-popover">Toggle</button>

Bạn cũng có thể chỉ định xem một nút có mở hay đóng cửa sổ bật lên bằng cách sử dụng popovertargetaction="show" và popovertargetaction="hide".

Với JavaScript

Bạn cũng có thể kiểm soát một cửa sổ bật lên bằng JavaScript. Điều này rất hữu ích khi bạn muốn hiển thị một cửa sổ bật lên để phản hồi một hành động nào đó ngoài việc người dùng nhấp vào nút. Để làm việc này, bạn cần lấy phần tử cửa sổ bật lên, rồi gọi showPopover(), hidePopover() hoặc togglePopover().

Các loại cửa sổ bật lên

Khi thêm một cửa sổ bật lên vào trang web, bạn cần cân nhắc nhiều lượt tương tác. Cách mở Người dùng có thể đóng thông báo này bằng cách nào? Điều gì sẽ xảy ra với các cửa sổ bật lên đang mở khác? Có 3 loại cửa sổ bật lên và bạn có thể chọn loại cung cấp hành vi và hoạt động tương tác theo yêu cầu của trường hợp sử dụng.

Popover tự động

Cửa sổ bật lên tự động có nhiều chức năng nhất và là cửa sổ mặc định nếu bạn không chỉ định loại.

<div id="popover" popover>My popover</div>

Trong nhiều trường hợp, bạn không muốn mở nhiều cửa sổ bật lên cùng một lúc, vì vậy, các cửa sổ bật lên tự động sẽ đóng các cửa sổ bật lên tự động khác khi chúng được mở. Các thành phần này cũng hỗ trợ tính năng "đóng nhanh", tức là nếu bạn nhấp vào bên ngoài cửa sổ bật lên, cửa sổ này sẽ tự động đóng. Bạn cũng có thể đóng cửa sổ này bằng phím Esc.

Thông báo bật lên thủ công

Mặc dù hành vi tự động của cửa sổ bật lên bao gồm nhiều trường hợp sử dụng, nhưng có những trường hợp bạn có thể cần kiểm soát cửa sổ bật lên nhiều hơn. Với cửa sổ bật lên thủ công, bạn có nhiều quyền kiểm soát hơn và cũng chịu trách nhiệm cho nhiều hành vi hơn.

<div id="popover" popover="manual">My popover</div>

Cửa sổ bật lên này sẽ chỉ đóng khi bạn đóng một cách rõ ràng – cửa sổ này không thể đóng bằng cách đóng nhanh hoặc bằng phím Esc. Tuy nhiên, bạn có thể mở nhiều cửa sổ bật lên cùng lúc.

Cửa sổ bật lên dạng gợi ý

Bạn cũng có thể muốn sử dụng popover để thêm chú thích công cụ vào trang của mình. Trong mẫu này, bạn muốn có thể di chuột qua một mục và xem nội dung mô tả. Mỗi lần chỉ nên mở một thẻ. Nếu bạn sử dụng cửa sổ bật lên tự động, thì việc mở một cửa sổ sẽ đóng mọi cửa sổ bật lên tự động đang mở khác. Nếu sử dụng cửa sổ bật lên thủ công, bạn cần triển khai thủ công nhiều hành vi, bao gồm cả việc đóng các cửa sổ bật lên khác. Chú thích bật lên gợi ý cung cấp lựa chọn thứ ba có hành vi tương tự như chú thích bật lên tự động. Tuy nhiên, việc mở một chú thích sẽ không đóng các chú thích tự động.

<div id="popover" popover="hint">My popover</div>

Chú thích gợi ý rất hữu ích cho thông tin bổ sung, là thông tin phụ so với nội dung chính. Bạn thường muốn kích hoạt chú thích dạng cửa sổ bật lên bằng các sự kiện không phải lượt nhấp, chẳng hạn như di chuột hoặc tiêu điểm.

Định vị thành phần bật lên

Theo mặc định, các cửa sổ bật lên sẽ mở ở giữa màn hình. Chúng được thêm vào lớp trên cùng, phía trên tất cả nội dung khác của bạn và có thể được đặt tương đối so với khung hiển thị.

Điều này không phải lúc nào cũng lý tưởng, vì bạn thường muốn đặt cửa sổ bật lên gần với mục kích hoạt cửa sổ đó. Tính năng định vị điểm neo cung cấp một cách để thực hiện việc đó.

Có hai bước để cố định vị trí: xác định phần tử cố định và đặt phần tử của bạn tương ứng với phần tử cố định đó. Popover có thể xử lý bước đầu tiên bằng cách đặt một neo ngầm cho bạn. Khi bạn mở một cửa sổ bật lên bằng <button popovertarget>, nút này sẽ là điểm neo ngầm. Nếu đang mở một cửa sổ bật lên bằng JavaScript, bạn có thể đặt điểm neo ngầm ẩn bằng lựa chọn source.

Theo mặc định, một cửa sổ bật lên sẽ được căn giữa bằng cách sử dụng margin: auto. Để sử dụng tính năng định vị bằng điểm neo, bạn có thể cần phải ghi đè bằng cách đặt margin: unset.

Kiểu và ảnh động

Phần tử giả ::backdrop

Popover mở ra ở lớp trên cùng, phía trên tất cả nội dung khác trên trang của bạn. Bên dưới cửa sổ bật lên là một phần tử giả ::backdrop mà bạn có thể tạo kiểu.

Điều quan trọng cần lưu ý là nội dung bên ngoài cửa sổ bật lên không phải là nội dung tĩnh – bạn vẫn có thể nhấp vào các nút và dùng bàn phím để di chuyển trên trang. Bạn không nên che khuất nội dung trang, chẳng hạn như bằng cách áp dụng hiệu ứng làm mờ mạnh hoặc đặt nền thành màu đục.

Pseudo class :popover-open

Giả sử bạn muốn bố trí nội dung của cửa sổ bật lên bằng cách sử dụng Lưới CSS. Bạn thêm [popover]{ display: grid } và đột nhiên tất cả các cửa sổ bật lên đều xuất hiện. Nguyên nhân là do các cửa sổ bật lên bị ẩn bằng cách sử dụng display: none. Bạn có thể sử dụng lớp giả :popover-open để chỉ áp dụng kiểu khi cửa sổ bật lên đang mở.

[popover]{
/* Don't do this! All popovers will be visible.  */
  display: grid;
}

[popover]:popover-open {
/*  This will only affect open popovers. */
  display: grid;
}

:popover-open cũng hữu ích khi bạn tạo ảnh động cho một cửa sổ bật lên.

Tạo ảnh động cho cửa sổ bật lên

Ảnh động của cửa sổ bật lên có 3 bước:

1. @starting-style {popover:popover-open { } }–Kiểu ban đầu cho cửa sổ bật lên ngay khi cửa sổ này xuất hiện. Xin lưu ý rằng bạn cần xác định thuộc tính này trong biểu định kiểu sau #2.
2. popover:popover-open { } – Kiểu cho cửa sổ bật lên khi cửa sổ này mở.
3. popover { } – Các kiểu mà cửa sổ bật lên chuyển đến khi đóng.

Một cửa sổ bật lên sẽ bị ẩn bằng display: none khi không mở. Để tạo hiệu ứng cho thành phần này, bạn cần đặt transition-behavior: allow-discrete, đồng thời thêm display vào danh sách các thuộc tính trong transition.

Nếu đang định vị cửa sổ bật lên bằng một neo ngầm, bạn cũng cần thêm overlay vào danh sách thuộc tính trong transition. Mối quan hệ neo ngầm định sẽ bị xoá khi cửa sổ bật lên bị xoá khỏi lớp trên cùng. Vì vậy, việc thêm một hiệu ứng chuyển đổi vào thuộc tính overlay sẽ trì hoãn quá trình này cho đến khi hiệu ứng chuyển đổi thoát hoàn tất.

Tương tác giữa các cửa sổ bật lên

Có thể bạn sẽ có nhiều cửa sổ bật lên trên một trang và cách chúng tương tác phụ thuộc vào loại cửa sổ bật lên và cách chúng được sử dụng.

Popover lồng nhau

Trong một số trường hợp, bạn có thể cần mở một cửa sổ bật lên từ bên trong một cửa sổ bật lên khác. Ví dụ: bạn có thể có một trình đơn bật lên và một trong các mục trong trình đơn sẽ mở một trình đơn con. Khi người dùng đóng trình đơn chính, bạn không muốn trình đơn con vẫn mở. Các cửa sổ bật lên có thể giúp xử lý việc đó một cách tự động.

Nếu bạn đang mở một chú thích dạng cửa sổ bật lên từ một chú thích dạng cửa sổ bật lên hoặc một cửa sổ bật lên tự động từ một cửa sổ bật lên tự động, thì các cửa sổ bật lên sẽ được đưa vào một ngăn xếp. Khi đóng một cửa sổ bật lên, tất cả các cửa sổ bật lên sau đó trong ngăn xếp cũng sẽ đóng. Điều này cũng áp dụng cho thao tác đóng nhanh – nếu bạn nhấp vào một cửa sổ bật lên, tất cả cửa sổ bật lên sau đó trong ngăn xếp sẽ đóng, nhưng các cửa sổ bật lên trước đó sẽ vẫn mở.

Một cửa sổ bật lên sẽ được thêm vào ngăn xếp nếu phần tử nguồn của cửa sổ đó nằm bên trong một cửa sổ bật lên. Phần tử nguồn được đặt tự động khi bạn dùng popovertarget trên một nút hoặc bằng JavaScript bằng cách đặt lựa chọn source khi gọi .showPopover({source}) hoặc .togglePopover({source}).

Có một ngăn xếp cho cửa sổ bật lên tự động và một ngăn xếp riêng cho cửa sổ bật lên gợi ý. Tuy nhiên, nếu bạn mở một cửa sổ bật lên gợi ý từ bên trong một cửa sổ bật lên tự động, thì cửa sổ đó sẽ được thêm vào ngăn xếp tự động.

Hãy nhớ rằng chú thích dạng cửa sổ bật lên chỉ dành cho thông tin đơn giản, tạm thời, vì vậy bạn không thể kích hoạt cửa sổ bật lên tự động từ chú thích dạng cửa sổ bật lên.

Nếu đang dùng cửa sổ bật lên thủ công, bạn cần quản lý tất cả những việc này theo cách thủ công.

Đóng các loại cửa sổ bật lên khác

Bạn đã biết rằng việc mở một cửa sổ bật lên tự động sẽ đóng các cửa sổ bật lên tự động khác, nhưng các loại cửa sổ bật lên này tương tác với nhau như thế nào? Hãy khám phá điều này bằng ví dụ về một trang sử dụng cả 3 loại. Có một trình đơn điều hướng với các nút sử dụng cửa sổ bật lên tự động để mở và đóng. Trên trang có văn bản sử dụng cửa sổ bật lên gợi ý để hiện chú thích theo ngữ cảnh. Cuối cùng, có một thông báo dạng nổi kèm theo một cửa sổ bật lên thủ công để cho người dùng biết rằng một tác vụ ở chế độ nền đã hoàn tất.

Chú thích là thông tin tạm thời và xuất hiện khi chúng ta di chuột lên văn bản. Chúng tôi chỉ muốn một chú thích xuất hiện tại một thời điểm và việc kích hoạt một gợi ý thứ hai sẽ đóng gợi ý đầu tiên.

Khi bạn mở trình đơn bằng cách nhấp vào một nút, gợi ý sẽ đóng vì hai lý do. Trước tiên, lượt nhấp bên ngoài gợi ý sẽ kích hoạt thao tác đóng nhanh. Thứ hai, việc mở một cửa sổ bật lên tự động sẽ đóng tất cả các cửa sổ bật lên gợi ý đang mở. Điều này là do người dùng đã thay đổi nội dung mà họ đang tập trung vào và nội dung tạm thời trong một cửa sổ bật lên gợi ý không còn phù hợp nữa. Điều này có nghĩa là nếu bạn gọi showPopover() trên một cửa sổ bật lên tự động, mọi cửa sổ bật lên gợi ý đang mở sẽ đóng.

Các trình đơn thả xuống là trình đơn bật lên tự động. Với trình đơn thả xuống, bạn chỉ có thể mở một trình đơn tại một thời điểm và việc mở một trình đơn sẽ đóng trình đơn còn lại. Như bạn thấy, việc mở một cửa sổ bật lên tự động cũng sẽ đóng mọi cửa sổ bật lên gợi ý đang mở.

Tuy nhiên, khi một trình đơn thả xuống đang mở, bạn vẫn có thể muốn xem nội dung của một chú thích không liên quan. Việc hiện chú thích gợi ý không đóng các cửa sổ bật lên tự động.

Popover thủ công không bị ảnh hưởng bởi popover tự động hoặc popover gợi ý và khi mở, popover này sẽ không đóng bất kỳ popover gợi ý hoặc popover tự động nào. Tuy nhiên, nếu bạn mở một cửa sổ bật lên theo cách thủ công bằng cách nhấp vào một nút, thì thao tác này sẽ kích hoạt tính năng đóng nhanh cho các cửa sổ bật lên tự động và cửa sổ bật lên gợi ý.

Tương tác giữa các loại cửa sổ bật lên có thể phức tạp, nhưng chúng cho phép các mẫu sử dụng phổ biến nếu bạn sử dụng các loại này trong những tình huống phù hợp. Nếu các cửa sổ bật lên của bạn không tương tác như mong đợi, hãy xem lại những loại mà bạn đang sử dụng.

Kiểm tra mức độ hiểu biết của bạn