Dialog
Modal dialog that will show its content at the center of the page.
Typical usage is to display important messages which may or may not require the user to take an action or to provide a way of manipulating content on the page without leaving the current context.
- Default
- Inverse
Dialog title
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
<div class="lui-modal-background"></div>
<div class="lui-dialog" style="width: 400px;">
<div class="lui-dialog__header">
<div class="lui-dialog__title">Dialog title</div>
</div>
<div class="lui-dialog__body">
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
</div>
<div class="lui-dialog__footer">
<button class="lui-button lui-dialog__button">Cancel</button>
<button class="lui-button lui-dialog__button close-button">OK</button>
</div>
</div>
Dialog title
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
<div class="lui-modal-background"></div>
<div class="lui-dialog lui-dialog--inverse" style="width: 400px;">
<div class="lui-dialog__header">
<div class="lui-dialog__title">Dialog title</div>
</div>
<div class="lui-dialog__body">
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
</div>
<div class="lui-dialog__footer">
<button class="lui-button lui-dialog__button lui-button--inverse">Cancel</button>
<button class="lui-button lui-dialog__button lui-button--inverse close-button">OK</button>
</div>
</div>
Dialog JS
- Default
- Inverse
- JS
Dialog title
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
<button class="lui-button dialog-trigger">Open dialog (light)</button>
<div class="dialog-content" style="display: none;">
<div class="lui-dialog" style="width: 400px;">
<div class="lui-dialog__header">
<div class="lui-dialog__title">Dialog title</div>
</div>
<div class="lui-dialog__body">
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
</div>
<div class="lui-dialog__footer">
<button class="lui-button lui-dialog__button">Cancel</button>
<button class="lui-button lui-dialog__button close-button">OK</button>
</div>
</div>
</div>
Dialog title
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
<button class="lui-button lui-button--inverse dialog-trigger">Open dialog (dark)</button>
<div class="dialog-content" style="display: none;">
<div class="lui-dialog lui-dialog--inverse" style="width: 400px;">
<div class="lui-dialog__header">
<div class="lui-dialog__title">Dialog title</div>
</div>
<div class="lui-dialog__body">
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
</div>
<div class="lui-dialog__footer">
<button class="lui-button lui-dialog__button lui-button--inverse">Cancel</button>
<button class="lui-button lui-dialog__button lui-button--inverse close-button">OK</button>
</div>
</div>
</div>
<script>
var dialogTriggers = document.querySelectorAll( ".example-box .dialog-trigger" );
dialogTriggers = [].slice.apply( dialogTriggers ); // convert to array
dialogTriggers.forEach( function ( element ) {
element.addEventListener( "click", function() {
var dialog = leonardoui.dialog( {
content: element.nextElementSibling.innerHTML,
closeOnEscape: true
} );
// Dialog was shown
var closeButton = dialog.element.querySelectorAll( ".close-button" )[0];
closeButton.focus();
closeButton.addEventListener( "click", function() {
dialog.close();
} );
} );
} );
</script>
Options
| Option | Type | Description | Default |
|---|---|---|---|
| content | string | Element | HTML content as a string or a Element element | |
| closeOnEscape | boolean | Close the dialog with escape key | false |
| onClose | function | Callback fired when the dialog is closing |
Mobile header
Use a mobile variant on the header and fade buttons to style the header as commonly seen on mobile devices.
Experimental
- Default
- Inverse
Dialog title
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
<div class="lui-modal-background"></div>
<div class="lui-dialog" style="width: 400px;">
<div class="lui-dialog__header lui-header__header lui-dialog__header--mobile">
<button class="lui-fade-button">Action 1</button>
<div class="lui-dialog__title">Dialog title</div>
<button class="lui-fade-button">Action 2</button>
</div>
<div class="lui-dialog__body">
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
</div>
</div>
Dialog title
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
<div class="lui-modal-background"></div>
<div class="lui-dialog lui-dialog--inverse" style="width: 400px;">
<div class="lui-dialog__header lui-header__header lui-dialog__header--mobile">
<button class="lui-fade-button lui-fade-button--inverse">Action 1</button>
<div class="lui-dialog__title">Dialog title</div>
<button class="lui-fade-button lui-fade-button--inverse">Action 2</button>
</div>
<div class="lui-dialog__body">
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
</div>
</div>
Mobile content and footer
To get a typical mobile styling of the content with buttons in the footer, add the following markup:
Experimental
- Default
- Inverse
Dialog Title
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.<div class="lui-modal-background"></div>
<div class="lui-dialog" style="width: 400px;">
<div class="lui-dialog__body">
<h2 align="center">Dialog Title</h2>
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
</div>
<div class="lui-dialog__footer lui-dialog__footer--mobile">
<button class="lui-button lui-dialog__button lui-dialog__button--mobile">
<span class="lui-button__text">Cancel</span>
</button>
<button class="lui-button lui-dialog__button lui-dialog__button--mobile">
<span class="lui-button__text">OK</span>
</button>
</div>
</div>
Dialog Title
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.<div class="lui-modal-background"></div>
<div class="lui-dialog lui-dialog--inverse" style="width: 400px;">
<div class="lui-dialog__body">
<h2 align="center">Dialog Title</h2>
Bacon ipsum dolor amet ham hock pork short loin, cow bacon doner jerky pork loin hamburger. Pork chop biltong chuck turkey, cow meatloaf corned beef fatback pancetta drumstick landjaeger jowl.
</div>
<div class="lui-dialog__footer lui-dialog__footer--mobile">
<button class="lui-button lui-dialog__button lui-dialog__button--mobile lui-button--inverse">
<span class="lui-button__text">Cancel</span>
</button>
<button class="lui-button lui-dialog__button lui-dialog__button--mobile lui-button--inverse">
<span class="lui-button__text">OK</span>
</button>
</div>
</div>