Modal 对话框
对话框用于点击按钮时显示对话框或一个盒子模型。
Supported on 37+ 98+ 15.4+ 15.4+
| 类名 | 类型 | |
|---|---|---|
| modal | 组件类 | Container element |
| modal-box | 组件类 | The content of modal |
| modal-action | 组件类 | Container for modal action buttons |
| modal-backdrop | 组件类 | The backdrop that covers the back of modal so we can close the modal by clicking outside |
| modal-toggle | 组件类 | For hidden checkbox that controls modal |
| modal-open | 装饰类 | Add/remove this class to open/close the modal using JS |
| modal-top | 响应类 | Moves the modal to top |
| modal-bottom | 响应类 | Moves the modal to bottom |
| modal-middle | 响应类 | Moves the modal to middle (default) |
有三种方式来使用 Modal 模态框:
- Using
<dialog>element: It needs JS to open but it has better accessibility and we can close it using Esc key - Using a hidden
<input type="checkbox">and<label>to check/uncheck the checkbox and open/close the modal - Using
<a>anchor links: A link adds a parameter to the URL and you only see the modal when the URL has that parameter
确保你为每一个 Modal 模态框使用了唯一的 ID
Method 1: using dialog element recommended
# Dialog modal, closes when clicked outside
there a second form with 'modal-backdrop' class and it covers the screen so we can close the modal when clicked outside
# Dialog modal with a close button at corner
# Dialog modal with custom width
You can use any w-* and max-w-* utility class to customize the width
Method 2: using a hidden checkbox legacy
# Modal that closes when clicked outside
Modal works with a hidden checkbox and labels can toggle the checkbox so we can use another label tag with 'modal-backdrop' class that covers the screen so we can close the modal when clicked outside
Method 3: using anchor links legacy
# Modal using anchor link
Anchor links might not work well on some SPA frameworks so if there are problems, use the first example
你有什么问题么？ 向社区提问题
你发现了 bug 么？ 在 GitHub 提 issue
你喜欢 daisyUI？ 在 twitter、知乎、微博宣传 daisyui 吧！
支持daisyUI的开发:
Open Collective
Hello!
This modal works with a hidden checkbox!
Congratulations random Internet user!
You've been selected for a chance to get one year of subscription to use Wikipedia for free!