Skip to content

Instantly share code, notes, and snippets.

@nolanlawson

nolanlawson/index.html

Last active Feb 21, 2021
Embed
What would you like to do?
Modal with inert demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modal dialog with inert demo</title>
</head>
<body>
<button>Focusable button</button>
<button class="modal-button">Click to open modal dialog</button>
<button>Another focusable button</button>
<div role="dialog" style="display:none;position:absolute;top:100px;bottom:100px;left:100px;right:100px;z-index:2">
<div>
<button>Light button</button>
<open-shadow></open-shadow>
<button>Another light button</button>
</div>
<video controls src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm"></video>
<div>
<button>Light button</button>
<closed-shadow></closed-shadow>
<button>Another light button</button>
</div>
</div>
<script>
class ClosedShadow extends HTMLElement {
constructor () {
super()
const shadow = this.attachShadow({ mode: 'closed' })
shadow.innerHTML = '<button>Closed shadow button!</button>'
}
}
class OpenShadow extends HTMLElement {
constructor () {
super()
const shadow = this.attachShadow({ mode: 'open' })
shadow.innerHTML = '<button>Open shadow button!</button>'
}
}
customElements.define('closed-shadow', ClosedShadow)
customElements.define('open-shadow', OpenShadow)
document.querySelector('.modal-button').addEventListener('click', () => {
const dialog = document.querySelector('[role=dialog]')
dialog.style.display = 'revert'
for (const element of document.body.children) {
if (element !== dialog) {
element.setAttribute('inert', 'true')
}
}
dialog.querySelector('button').focus()
})
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment