Dealogic Styleguide

section menu

Dialog

Dialogs are useful when a user needs to leave the normal application flow to focus on a specific message or workflow.

To automatically focus on an element / component after the dialog window opens, add a data-focus attribute to that element.

Attributes

attribute: type: required? default: description:
size string no small

Indicating the standard width of the dialog (small, medium or large)
modal boolean no false

Enable 'modal' behavior of dialog (does not close on clicking overlay or [esc]). You need to programmatically close this dialog after opening.
hidemodaloverlay boolean no false

Hide modal overlay (gray background), so the background stay accessible
top string no  

Overwrite the default top by CSS
left string no  

Overwrite the default left by CSS
bottom string no  

Overwrite the default bottom by CSS
right string no  

Overwrite the default right value by CSS

Events

beforeopen

Triggered before the open transition is started

beforeclose

Triggered before the closing transition is started

afteropen

Triggered after the dialog has opened

afterclose

Triggered after the dialog is closed

Examples

trigger dialog

Example Dialog Title

Bacon ipsum dolor amet prosciutto beef ribs pork belly pastrami spare ribs short loin pig tri-tip cupim kielbasa strip steak short ribs ground round.

Button Label Button Label 
<dl-button id="trigger-regular">trigger dialog</dl-button>

<dl-dialog id="dialog-regular">
  <h1>Example Dialog Title</h1>
  <p>Bacon ipsum dolor amet prosciutto beef ribs pork belly pastrami spare ribs short loin pig tri-tip cupim kielbasa strip steak short ribs ground round.</p>

  <fieldset>
    <div class="dl-field">
      <label>field title</label>
      <div>
        <dl-input name="dinges" placeholder="Placeholder text…" data-focus></dl-input>
      </div>
    </div>

    <div class="dl-field">
      <label>field title</label>
      <div>
        <dl-input name="dinges" placeholder="Placeholder text…"></dl-input>
      </div>
    </div>
  </fieldset>

  <div class="buttons">
    <dl-button>Button Label</dl-button>
    <dl-button icon="vc-search" state="progressive">Button Label</dl-button>
  </div>
</dl-dialog>
const trigger = document.querySelector('#trigger-regular')
const dialog = document.querySelector('#dialog-regular')
trigger.addEventListener('click', function() {
  dialog.open()
})

Modal dialog, with auto-focus on the 'click to close' button

trigger dialog

Example Dialog Title

Bacon ipsum dolor amet prosciutto beef ribs pork belly pastrami spare ribs short loin pig tri-tip cupim kielbasa.

Click to close 
<dl-button id="trigger-simple">trigger dialog</dl-button>

<dl-dialog id="dialog-simple" modal>
  <h1>Example Dialog Title</h1>
  <p>Bacon ipsum dolor amet prosciutto beef ribs pork belly pastrami spare ribs short loin pig tri-tip cupim kielbasa.</p>

  <div class="buttons">
    <dl-button state="positive" id="dialog-close" data-focus>Click to close</dl-button>
  </div>
</dl-dialog>
const triggerSimple = document.querySelector('#trigger-simple')
const dialogSimple = document.querySelector('#dialog-simple')
const closeSimple = document.querySelector('#dialog-close')

triggerSimple.addEventListener('click', function() {
    dialogSimple.open()
})
closeSimple.addEventListener('click', function() {
    dialogSimple.close()
})

Positioned by left (calc(100% - 360px)) and top(calc(100% - 360px)) with hidemodaloverlay (no grey background -> clickable background)

trigger dialog

Example Dialog Title

Bacon ipsum dolor amet prosciutto beef ribs pork belly pastrami spare ribs short loin pig tri-tip cupim kielbasa strip steak short ribs ground round.

Button Label Close 
<dl-button id="trigger-positioned">trigger dialog</dl-button>

<dl-dialog id="dialog-positioned" hidemodaloverlay left="calc(100% - 360px)" top="calc(100% - 360px)">
    <h1>Example Dialog Title</h1>
    <p>Bacon ipsum dolor amet prosciutto beef ribs pork belly pastrami spare ribs short loin pig tri-tip
        cupim kielbasa strip steak short ribs ground round.</p>

    <fieldset>
        <div class="dl-field">
            <label>field title</label>
            <div>
                <dl-input name="dinges" placeholder="Placeholder text…" data-focus></dl-input>
            </div>
        </div>

        <div class="dl-field">
            <label>field title</label>
            <div>
                <dl-input name="dinges" placeholder="Placeholder text…"></dl-input>
            </div>
        </div>
    </fieldset>

    <div class="buttons">
        <dl-button>Button Label</dl-button>
        <dl-button state="positive" id="dialog-close-positioned">Close</dl-button>
    </div>
</dl-dialog>
const closepositioned = document.querySelector('#dialog-close-positioned')
const triggerpositioned = document.querySelector('#trigger-positioned')
const dialogpositioned = document.querySelector('#dialog-positioned')

triggerpositioned.addEventListener('click', function () {
    dialogpositioned.open()
})

closepositioned.addEventListener('click', function () {
    dialogpositioned.close()
})