baobeld/benjaminpalko
1
0
Fork 0
Code Pull requests Packages 2 Activity Actions

set up new workflow and migrate to .forgejo dir (#5)
Some checks failed
Deploy / deploy (push) Failing after 39s
Details

Browse source 
Co-authored-by: Benjamin Palko <benjaminpalko@hotmail.com>
Reviewed-on: #5
This commit is contained in:
Benjamin Palko 2026-08-11 20:55:29 -04:00
parent c37955c51b
commit f526f5c0aa
99 changed files with 1866 additions and 1470 deletions
Download patch file Download diff file Expand all files Collapse all files

63
.opencode/skills/daisyui/components/modal.md
View file

@ -1,84 +1,95 @@
### modal
Modal is used to show a dialog or a box when you click a button
[modal docs](https://daisyui.com/components/modal/)
#### Class names
- component: `modal`
- part: `modal-box`, `modal-action`, `modal-backdrop`, `modal-toggle`
- modifier: `modal-open`
- placement: `modal-top`, `modal-middle`, `modal-bottom`, `modal-start`, `modal-end`
#### Syntax
Using HTML dialog element (recommended)
```html
<button onclick="my_modal.showModal()">Open modal</button>
<dialog id="my_modal" class="modal">
<div class="modal-box">{CONTENT}</div>
<form method="dialog" class="modal-backdrop"><button>close</button></form>
<div class="modal-box">{CONTENT}</div>
<form method="dialog" class="modal-backdrop"><button>close</button></form>
</dialog>
```
If we want it to close when clicking outside:
```html
<button class="btn" onclick="my_modal.showModal()">open modal</button>
<dialog id="my_modal" class="modal">
<div class="modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Press ESC key or click outside to close</p>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
<div class="modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Press ESC key or click outside to close</p>
</div>
<form method="dialog" class="modal-backdrop">
<button>close</button>
</form>
</dialog>
```
Using popover API (recommended only if we DON'T want to trap the keyboard navigation in the modal)
```html
<button popovertarget="my_modal" class="btn">Open modal</button>
<div class="modal" popover id="my_modal">
<div class="modal-box">
{CONTENT}
<div class="modal-action">
<button popovertarget="my_modal" popovertargetaction="hide">close</button>
</div>
</div>
<div class="modal-box">
{CONTENT}
<div class="modal-action">
<button popovertarget="my_modal" popovertargetaction="hide">close</button>
</div>
</div>
</div>
```
If we want it to close when clicking outside:
```html
<button class="btn" popovertarget="my_modal">Open</button>
<div class="modal" id="my_modal" popover>
<div class="modal-box">
<h3 class="font-bold text-lg">Hello!</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
</div>
<div class="modal-backdrop">
<button popovertarget="my_modal" popovertargetaction="hide">close</button>
</div>
<div class="modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
<p class="py-4">Press ESC key or click the button below to close</p>
</div>
<div class="modal-backdrop">
<button popovertarget="my_modal" popovertargetaction="hide">close</button>
</div>
</div>
```
Using checkbox (legacy)
```html
<label for="my-modal" class="btn">Open modal</label>
<input type="checkbox" id="my-modal" class="modal-toggle" />
<div class="modal">
<div class="modal-box">{CONTENT}</div>
<label class="modal-backdrop" for="my-modal">Close</label>
<div class="modal-box">{CONTENT}</div>
<label class="modal-backdrop" for="my-modal">Close</label>
</div>
```
Using anchor links (legacy)
```html
<a href="#my-modal" class="btn">Open modal</a>
<div class="modal" id="my-modal">
<div class="modal-box">{CONTENT}</div>
<div class="modal-box">{CONTENT}</div>
</div>
```
#### Rules
- {MODIFIER} is optional and can have one of the modifier/placement class names
- Use unique IDs for each modal
- For HTML dialog element modals, add `<form method="dialog">` for closing the modal with submit