Basic Modal
Simple modal with title and content
<modal-dialog title="Welcome">
<p>This is a basic modal dialog.</p>
<p>Click outside or press Escape to close.</p>
</modal-dialog>
Confirmation Dialog
Modal with confirm and cancel actions
<modal-dialog id="confirm" title="Delete Item?" size="small">
<p>Are you sure? This action cannot be undone.</p>
<button slot="footer" onclick="confirm.cancel()">Cancel</button>
<button slot="footer" onclick="confirm.confirm()">Delete</button>
</modal-dialog>
<script>
confirm.addEventListener('modal-confirm', () => {
alert('Item deleted!');
});
</script>
Size Variants
Small, medium, large, full width, and fullscreen
<modal-dialog size="small" title="Small Modal">
<p>This is a small modal with limited width (360px).</p>
</modal-dialog>
Custom Size
Set exact dimensions with width and height attributes
<modal-dialog width="50vw" height="70vh" title="Custom Size">
<p>Modal with custom dimensions: 50vw × 70vh</p>
</modal-dialog>
Form Modal
Modal containing a form
<modal-dialog id="form" title="Contact Form">
<form>
<input type="text" placeholder="Name" />
<input type="email" placeholder="Email" />
<textarea placeholder="Message"></textarea>
</form>
<button slot="footer" onclick="form.cancel()">Cancel</button>
<button slot="footer" onclick="form.confirm()">Submit</button>
</modal-dialog>