Const<!-- Listening for dispatched events -->
<umd-element-modal id="my-modal" data-layout-hidden="true">
<div slot="content">...</div>
</umd-element-modal>
<script>
const modal = document.getElementById('my-modal');
modal.addEventListener('modal:show', () => console.log('modal opened'));
modal.addEventListener('modal:hide', () => console.log('modal closed'));
</script>
<!-- Basic modal -->
<umd-element-modal data-layout-hidden="true">
<h2>Welcome</h2>
<p>This is modal content.</p>
<button>Close</button>
</umd-element-modal>
<!-- Programmatic control -->
<button id="open-modal">Open Modal</button>
<umd-element-modal id="my-modal" data-layout-hidden="true">
<div class="modal-content">
<h2>Important Information</h2>
<p>Please read this carefully...</p>
<button id="close-modal">I Understand</button>
</div>
</umd-element-modal>
<script>
const modal = document.getElementById('my-modal');
document.getElementById('open-modal').addEventListener('click', () => {
modal.setAttribute('data-visual-open', 'true');
});
document.getElementById('close-modal').addEventListener('click', () => {
modal.setAttribute('data-visual-closed', 'true');
});
</script>
<!-- Form modal -->
<umd-element-modal data-layout-hidden="true">
<form>
<h2>Contact Us</h2>
<label>
Name:
<input type="text" name="name" required>
</label>
<label>
Email:
<input type="email" name="email" required>
</label>
<textarea name="message" placeholder="Your message"></textarea>
<button type="submit">Send</button>
</form>
</umd-element-modal>
Modal
A modal overlay component that displays content in a focused dialog window. Includes backdrop, close functionality, and proper focus management for accessibility. The modal can be controlled programmatically through observed attributes.
Custom Element
<umd-element-modal>Slots
Attributes
data-layout-hidden- Initial visibility state:true- Modal starts hiddenObserved Attributes
data-layout-hidden- Controls visibility:false(when previouslytrue) — shows the modaltrue(when previouslyfalse) — hides the modalDispatched Events
Both events bubble and are
composed: true(they cross the Shadow DOM boundary).modal:show— dispatched on the host element when the modal opensmodal:hide— dispatched on the host element when the modal closes