Dialog
Usage notes
Dialogs display important information that users need to acknowledge. They appear over the interface and block further interactions.
Default
Toggle markup
<coral-dialog id="markupDialog">
<coral-dialog-header>Dialog from Markup</coral-dialog-header>
<coral-dialog-content>This dialog was created from markup with child elements.</coral-dialog-content>
<coral-dialog-footer>
<button is="coral-button" coral-close="">Cancel</button>
<button is="coral-button" variant="primary" coral-close="">Done</button>
</coral-dialog-footer>
</coral-dialog>
<button is="coral-button" onclick="showDialog('markupDialog')">Dialog from Markup</button>
Custom Sized Dialog
Toggle markup
<coral-dialog id="customSizedDialog">
<coral-dialog-header>Small Dialog</coral-dialog-header>
<coral-dialog-content>This dialog is supposed to be very small with 200px width.</coral-dialog-content>
</coral-dialog>
<button is="coral-button" onclick="showDialog('customSizedDialog')">Custom Sized Dialog</button>
<style>
#customSizedDialog [coral-dialog-size] {
width: 200px;
}
</style>
Scrolling Dialog
Toggle markup
<coral-dialog id="scrollingDialog">
<coral-dialog-header>Scrolling Dialog</coral-dialog-header>
<coral-dialog-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
</coral-dialog-content>
<coral-dialog-footer>
<button is="coral-button" variant="primary" coral-close="">Done</button>
</coral-dialog-footer>
</coral-dialog>
Fullscreen Dialog
Toggle markup
<coral-dialog fullscreen="" id="fullscreenDialog">
<coral-dialog-header>Fullscreen Dialog</coral-dialog-header>
<coral-dialog-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
</coral-dialog-content>
<coral-dialog-footer>
<button is="coral-button" variant="primary" coral-close="">Done</button>
</coral-dialog-footer>
</coral-dialog>
<button is="coral-button" onclick="showDialog('fullscreenDialog')">Fullscreen Dialog</button>
Scrolling fullscreen Dialog
Toggle markup
<coral-dialog fullscreen="" id="scrollingFullscreenDialog">
<coral-dialog-header>Scrolling Fullscreen Dialog</coral-dialog-header>
<coral-dialog-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
</coral-dialog-content>
<coral-dialog-footer>
<button is="coral-button" variant="primary" coral-close="">Done</button>
</coral-dialog-footer>
</coral-dialog>
<button is="coral-button" onclick="showDialog('scrollingFullscreenDialog')">Scrolling fullscreen Dialog</button>
Variants
Toggle markup
<coral-dialog id="dialog-variant" fullscreen="">
<coral-dialog-header id="content_title">Fullscreen Dialog</coral-dialog-header>
<coral-dialog-content>
<p id="content_fullscreen">
This is a fullscreen dialog. The footer is moved above,
so buttons are on the top right of the dialog above content.
</p>
<p id="content_normal" hidden="">
This is a normal dialog. The footer remains below, so buttons are beneath content.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
</coral-dialog-content>
<coral-dialog-footer>
<button id="switchVariant" is="coral-button" variant="quiet">Switch Variant</button>
<button id="switchMode" is="coral-button" variant="primary">Switch Mode</button>
</coral-dialog-footer>
</coral-dialog>
<button is="coral-button" onclick="showDialog('dialog-variant')">Variant Dialog</button>
<script>
window.addEventListener('load', function() {
const dialogVariant = document.getElementById('dialog-variant');
document.getElementById('switchMode').addEventListener('click', function() {
dialogVariant.fullscreen = !dialogVariant.fullscreen;
document.querySelector('#content_fullscreen').hidden = !dialogVariant.fullscreen;
document.querySelector('#content_normal').hidden = dialogVariant.fullscreen;
document.querySelector('#content_title').innerHTML = dialogVariant.fullscreen ? 'Fullscreen Dialog' : 'Normal Dialog';
});
var variants = Object.keys(Coral.Dialog.variant);
variants.currentVariant = 0;
document.getElementById('switchVariant').addEventListener('click', function() {
variants.currentVariant++;
if (variants.currentVariant > variants.length) {
variants.currentVariant = 0;
}
dialogVariant.variant = Coral.Dialog.variant[variants[variants.currentVariant]];
});
});
</script>
Stacking context
Toggle markup
<script>
document.getElementById('multipleDialogsSomeWithoutBackdrop').addEventListener('click', function() {
for (var i = 0; i < 5; i++) {
// Create the dialog
var dialog = new Coral.Dialog();
dialog.set({
backdrop: i % 2 === 0 ? 'none' : 'modal',
header: {
innerHTML: 'Dialog '+(i+1)
},
content: {
innerHTML: 'This is dialog number '+(i+1)+'.'
},
footer: {
innerHTML: '<button is="coral-button" variant="primary" coral-close>Done</button>'
}
});
// Add the dialog to the DOM
document.body.appendChild(dialog);
// Show the dialog and return focus to the button when its closed
dialog.show();
}
});
</script>
Closable
Toggle markup
<coral-dialog id="defaultCloseButtonDialog" closable="on">
<coral-dialog-header>Done</coral-dialog-header>
<coral-dialog-content>You can close this now.</coral-dialog-content>
</coral-dialog>
<button is="coral-button" onclick="showDialog('defaultCloseButtonDialog')">Closable On</button>
Movable
Toggle markup
<coral-dialog id="movableDialog" movable="">
<coral-dialog-header>Movable Dialog</coral-dialog-header>
<coral-dialog-content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent dapibus
vitae arcu ut ultrices. Cras pharetra augue lacus, vitae cursus odio scelerisque
sit amet. Etiam efficitur aliquam eros quis tincidunt. Donec odio tortor, placerat
a mattis eget, ultrices quis urna. Etiam pellentesque mollis finibus. Etiam a elit
rhoncus, porta magna non, mollis ante. Interdum et malesuada fames ac ante ipsum primis
in faucibus.
</p>
</coral-dialog-content>
<coral-dialog-footer>
<button is="coral-button" variant="primary" coral-close="">Ok</button>
</coral-dialog-footer>
</coral-dialog>
<button is="coral-button" onclick="showDialog('movableDialog')">Movable Dialog</button>
Wrapped Dialogs
Toggle markup
<coral-dialog id="no_content_zones">
<meta name="name" content="content">
I have no content zones predefined
</coral-dialog>
<coral-dialog id="multi_wrapper">
<div>
<coral-fileupload>
<form action="/submit" method="post">
<input type="hidden" value="">
<coral-dialog-header>Dialog with a Multiple wrappers</coral-dialog-header>
<coral-dialog-content>
I have 3 wrappers
</coral-dialog-content>
<coral-dialog-footer><button is="coral-button" variant="primary" coral-close="">Submit</button></coral-dialog-footer>
</form>
</coral-fileupload>
</div>
</coral-dialog>
<button is="coral-button" onclick="showDialog('no_content_zones')">No Content Zones Dialog</button>
<button is="coral-button" onclick="showDialog('multi_wrapper')">Multi Wrapper Dialog</button>
Dialog with buttons in header
Toggle markup
<coral-dialog id="buttonsInHeader" aria-labelledby="buttonsInHeader--heading">
<coral-dialog-header>
<span id="buttonsInHeader--heading" role="heading" aria-level="2">Dialog with buttons in header</span>
<div class="u-coral-pullRight">
<button is="coral-button" icon="helpCircle" variant="quietaction" title="Help" size="M" iconautoarialabel="off"></button>
<button is="coral-button" icon="fullScreen" variant="quietaction" title="Toggle Fullscreen" size="M" iconautoarialabel="off"></button>
<button is="coral-button" icon="close" variant="quietaction" title="Cancel" size="M" iconautoarialabel="off"></button>
<button is="coral-button" icon="check" variant="quietaction" title="Done" size="M" iconautoarialabel="off"></button>
</div>
</coral-dialog-header>
<coral-dialog-content>This dialog was created from markup with child elements.</coral-dialog-content>
<coral-dialog-footer>
<button is="coral-button" coral-close="">Cancel</button>
<button is="coral-button" variant="primary" coral-close="">Done</button>
</coral-dialog-footer>
</coral-dialog>
<button is="coral-button" onclick="showDialog('buttonsInHeader')">Dialog with buttons in header</button>