<dialog>
<form>
<p>
<label>
Type your name:
<input type="text" id="name" />
</label>
</p>
<div>
<button value="cancel" formmethod="dialog">Cancel</button>
<button id="confirm">Continue</button>
</div>
</form>
</dialog>
<p>
<button id="show">Open dialog</button>
</p>
<output></output>
const dialog = document.querySelector('dialog')
const confirm = document.querySelector('#confirm')
const show = document.querySelector('#show')
const output = document.querySelector('output')
const input = document.querySelector('#name')
show.addEventListener('click', () => {
dialog.showModal()
})
dialog.addEventListener('close', (e) => {
output.value =
['default', 'cancel'].includes(dialog.returnValue)
? 'The name is required'
: `Your name is: ${dialog.returnValue}`
})
confirm.addEventListener('click', (e) => {
e.preventDefault()
dialog.close(input.value)
})
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.