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
<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>
<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>