Dialogs

Modal dialogs

Modal dialogs are the most common dialog component.

The structural elements of these dialogs are generated by jQuery UI, and the customization of jQuery UI added classes can be found in _component.ui-dialog.scss

This component does not follow our regular naming convention, because it's a default component from jQuery UI.

Example

Edit firewall rule
Personal & organization details

Are you sure you want to delete this rule?

Delete firewall rule

Are you sure you want to delete this rule?

Markup

<button type="button" class="Btn" data-bind="click: dialog1.openDialog">Open Prompt</button>
<button type="button" class="Btn" data-bind="click: dialog2.openDialog">Open Dialog</button>

<div class="Dialog Dialog--prompt" data-bind="dialog: dialog1.dialogOptions, isOpen: dialog1.dialogIsOpen">
    <section class="Dialog-header">
        <span>Edit firewall rule</span>
        <button class="Dialog-close Icon Icon--x Icon--standalone Icon--border" data-bind="click: dialog1.closeDialog"></button>
    </section>

    <section class="Dialog-content">
        <div class="Bar Bar--neutral">Personal & organization details</div>

        <p class="u-large-text">Are you sure you want to delete this rule?</p>
    </section>
</div>

<div class="Dialog Dialog--modal" data-bind="dialog: dialog2.dialogOptions, isOpen: dialog2.dialogIsOpen">
    <section class="Dialog-header">
        <span>Delete firewall rule</span>
        <button class="Dialog-close Icon Icon--x Icon--standalone Icon--border" data-bind="click: dialog2.closeDialog"></button>
    </section>

    <section class="Dialog-content">
        <p class="u-large-text">Are you sure you want to delete this rule?</p>

        <button data-bind="click: dialog2.closeDialog" class="Btn Btn--neutral">Cancel</button><button class="Btn Btn--caution">Delete</button>
    </section>
</div>

Inline dialogs

.Dialog--inline

Inline dialogs are a special type of dialog that slides down inline with the content.

Example

Inline dialog

Markup

<div class="Dialog Dialog--inline" data-bind="slideVisible: dialog3.dialogIsOpen">
    <section class="Dialog-content">
        <h2>Inline dialog</h2>
        <p class="u-margin-top">
            <button type="button" class="Btn Btn--caution" data-bind="click: dialog3.closeDialog">Close</button>
        </p>
    </section>
</div>

<button type="button" class="Btn Btn--primary" data-bind="click: dialog3.openDialog, visible: !dialog3.dialogIsOpen()">Show</button>