smokephil/water.css
1
0
Fork 0
mirror of https://github.com/kognise/water.css.git synced 2025-12-06 06:44:58 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat: Add <dialog> support

Browse source
This commit is contained in:
Duy K. Bui 2020-10-02 13:08:57 -04:00
parent e5306ff96e
commit f89b85b65e
No known key found for this signature in database
GPG key ID: D09B20421B84FD32
4 changed files with 53 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

15
docs/index.html
View file

@ -278,6 +278,21 @@
<p>Lorem ipsum dolor sit blah blah.</p>
</details>
<p>The dialog (form, and menu) tag</p>
<button type='button' id='dialog-trigger'>Show me the dialog!</button>
<span id='dialog-result'></span>
<dialog id='dialog'>
<header>This is a sample dialog</header>
<form method="dialog">
<p>What is your favorite pet animal?</p>
<menu>
<button value="feline">Cats</button>
<button value="canine">Dogs</button>
<button value="other">Others</button>
</menu>
</form>
</dialog>
<h3 id="typography">Typography</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dictum hendrerit velit, quis

8
docs/script.js
View file

@ -77,3 +77,11 @@ copyButton.addEventListener('click', () => {
.catch(() => { copyButtonFeedback.textContent = '❌' })
.then(() => setTimeout(() => { copyButtonFeedback.textContent = '' }, 1000))
})
document.getElementById('dialog-trigger').addEventListener('click', function (event) {
document.getElementById('dialog-result').innerText = '';
document.getElementById('dialog').showModal();
});
document.getElementById('dialog').addEventListener('close', function (event) {
document.getElementById('dialog-result').innerText = `Your answer: ${event.target.returnValue}`;
});