Skip to content

Update +page.md #4544

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
tguelcan wants to merge 1 commit into
base: master
Choose a base branch
from
+29 −38
Draft

Update +page.md #4544

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 29 additions & 38 deletions packages/docs/src/routes/(routes)/components/modal/+page.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,50 +64,41 @@ We can open the modal using JS `ID.showModal()` method and close it using `ID.cl
The ID must be unique for each modal.

### ~Dialog modal
#### opens on click using ID.showModal() method. can be closed using ID.close() method
#### opens and closes on click using the native HTML <dialog> element, which has been supported by all major browsers for quite some time (Safari and Safari iOS added it in version 15.4, released over three years ago).

<button class="btn" onclick={() => my_modal_1.showModal()}>open modal</button>
<button class="btn" commandfor="my_modal_1" command="show-modal">open modal</button>
<dialog id="my_modal_1" class="modal">
<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 class="modal-action">
<form method="dialog">
<!-- if there is a button in form, it will close the modal -->
<button class="btn">Close</button>
</form>
<button class="btn" commandfor="my_modal_1" command="close">Close</button>
</div>
</div>
</dialog>

```html
<!-- Open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_1.showModal()">open modal</button>
<!-- Open the modal using the native HTML <dialog> element -->
<button class="$$btn" commandfor="my_modal_1" command="show-modal">open modal</button>
<dialog id="my_modal_1" class="$$modal">
<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 class="$$modal-action">
<form method="dialog">
<!-- if there is a button in form, it will close the modal -->
<button class="$$btn">Close</button>
</form>
<button class="$$btn" commandfor="my_modal_1" command="close">Close</button>
</div>
</div>
</dialog>
```
```jsx
{/* Open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_1').showModal()}>open modal</button>
{/* Open the modal using the native HTML <dialog> element */}
<button className="$$btn" commandfor="my_modal_1" command="show-modal">open modal</button>
<dialog id="my_modal_1" className="$$modal">
<div className="$$modal-box">
<h3 className="font-bold text-lg">Hello!</h3>
<p className="py-4">Press ESC key or click the button below to close</p>
<div className="$$modal-action">
<form method="dialog">
{/* if there is a button in form, it will close the modal */}
<button className="$$btn">Close</button>
</form>
<button className="$$btn" commandfor="my_modal_1" command="close">Close</button>
</div>
</div>
</dialog>
Expand All @@ -117,7 +108,7 @@ The ID must be unique for each modal.
### ~Dialog modal, closes when clicked outside
#### there is a second form with 'modal-backdrop' class and it covers the screen so we can close the modal when clicked outside

<button class="btn" onclick={() => my_modal_2.showModal()}>open modal</button>
<button class="btn" commandfor="my_modal_2" command="show-modal">open modal</button>
<dialog id="my_modal_2" class="modal">
<div class="modal-box">
<h3 class="font-bold text-lg">Hello!</h3>
Expand All @@ -129,8 +120,8 @@ The ID must be unique for each modal.
</dialog>

```html
<!-- Open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_2.showModal()">open modal</button>
{/* Open the modal using the native HTML <dialog> element */}
<button class="$$btn" commandfor="my_modal_2" command="show-modal">open modal</button>
<dialog id="my_modal_2" class="$$modal">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
Expand All @@ -142,8 +133,8 @@ The ID must be unique for each modal.
</dialog>
```
```jsx
{/* Open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_2').showModal()}>open modal</button>
{/* Open the modal using the native HTML <dialog> element */}
<button className="$$btn" commandfor="my_modal_2" command="show-modal">open modal</button>
<dialog id="my_modal_2" className="$$modal">
<div className="$$modal-box">
<h3 className="font-bold text-lg">Hello!</h3>
Expand All @@ -157,7 +148,7 @@ The ID must be unique for each modal.


### ~Dialog modal with a close button at corner
<button class="btn" onclick={() => my_modal_3.showModal()}>open modal</button>
<button class="btn" commandfor="my_modal_3" command="show-modal">open modal</button>
<dialog id="my_modal_3" class="modal">
<div class="modal-box">
<form method="dialog">
Expand All @@ -170,8 +161,8 @@ The ID must be unique for each modal.
</dialog>

```html
<!-- You can open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_3.showModal()">open modal</button>
<!-- Open the modal using the native HTML <dialog> element -->
<button class="$$btn" commandfor="my_modal_3" command="show-modal">open modal</button>
<dialog id="my_modal_3" class="$$modal">
<div class="$$modal-box">
<form method="dialog">
Expand All @@ -183,8 +174,8 @@ The ID must be unique for each modal.
</dialog>
```
```jsx
{/* You can open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_3').showModal()}>open modal</button>
{/* Open the modal using the native HTML <dialog> element */}
<button className="$$btn" commandfor="my_modal_3" command="show-modal">open modal</button>
<dialog id="my_modal_3" className="$$modal">
<div className="$$modal-box">
<form method="dialog">
Expand All @@ -201,7 +192,7 @@ The ID must be unique for each modal.
### ~Dialog modal with custom width
#### You can use any w-* and max-w-* utility class to customize the width

<button class="btn" onclick={() => my_modal_4.showModal()}>open modal</button>
<button class="btn" commandfor="my_modal_4" command="show-modal">open modal</button>
<dialog id="my_modal_4" class="modal">
<div class="modal-box w-11/12 max-w-5xl">
<h3 class="font-bold text-lg">Hello!</h3>
Expand All @@ -216,8 +207,8 @@ The ID must be unique for each modal.
</dialog>

```html
<!-- You can open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_4.showModal()">open modal</button>
<!-- Open the modal using the native HTML <dialog> element -->
<button class="$$btn" commandfor="my_modal_4" command="show-modal">open modal</button>
<dialog id="my_modal_4" class="$$modal">
<div class="$$modal-box w-11/12 max-w-5xl">
<h3 class="text-lg font-bold">Hello!</h3>
Expand All @@ -232,8 +223,8 @@ The ID must be unique for each modal.
</dialog>
```
```jsx
{/* You can open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_4').showModal()}>open modal</button>
{/* Open the modal using the native HTML <dialog> element */}
<button className="$$btn" commandfor="my_modal_4" command="show-modal">open modal</button>
<dialog id="my_modal_4" className="$$modal">
<div className="$$modal-box w-11/12 max-w-5xl">
<h3 className="font-bold text-lg">Hello!</h3>
Expand All @@ -252,7 +243,7 @@ The ID must be unique for each modal.
### ~Responsive
#### Modal goes bottom on SM screen size, goes middle on MD screen size

<button class="btn" onclick={() => my_modal_5.showModal()}>open modal</button>
<button class="btn" commandfor="my_modal_5" command="show-modal">open modal</button>
<dialog id="my_modal_5" class="modal modal-bottom sm:modal-middle">
<div class="modal-box">
<h3 class="font-bold text-lg">Hello!</h3>
Expand All @@ -267,8 +258,8 @@ The ID must be unique for each modal.
</dialog>

```html
<!-- Open the modal using ID.showModal() method -->
<button class="$$btn" onclick="my_modal_5.showModal()">open modal</button>
<!-- Open the modal using the native HTML <dialog> element -->
<button class="$$btn" commandfor="my_modal_5" command="show-modal">open modal</button>
<dialog id="my_modal_5" class="$$modal $$modal-bottom sm:$$modal-middle">
<div class="$$modal-box">
<h3 class="text-lg font-bold">Hello!</h3>
Expand All @@ -283,8 +274,8 @@ The ID must be unique for each modal.
</dialog>
```
```jsx
{/* Open the modal using document.getElementById('ID').showModal() method */}
<button className="$$btn" onClick={()=>document.getElementById('my_modal_5').showModal()}>open modal</button>
{/* Open the modal using the native HTML <dialog> element */}
<button className="$$btn" commandfor="my_modal_5" command="show-modal">open modal</button>
<dialog id="my_modal_5" className="$$modal $$modal-bottom sm:$$modal-middle">
<div className="$$modal-box">
<h3 className="font-bold text-lg">Hello!</h3>
Expand Down