Modal

Show a custom dialog for users to confirm operations.

Usage

A modal is simple to create, add the .modal class to a container, then wrap contents inside.

<div class="modal">
  <h4>Confirm Your Operation</h4>
  <p>
    Do you really want to delete this article?
    This operation is permanent, think twice.
  </p>
  <div class="btns-x btns-margin mt-small">
    <button class="btn btn-primary">Yes, delete it!</button>
    <button class="btn btn-secondary">No, give up.</button>
  </div>
</div>

Dynamic Control

We can combine the modal component with the overlay component and the toggle behavior to make the modal more powerful. Let’s see the below example.

<button class="btn btn-danger" data-toggle-for="delete_confirmation">
  Delete this article
</button>
<div class="overlay" data-toggle-target="delete_confirmation" data-toggle>
  <div class="overlay-body">
    <div class="modal" data-toggle-disabled>
      <h4>Are You Serious?</h4>
      <p>This operation is permanent, password must be entered to confirm.</p>
      <div class="fm fm-text">
        <input type="password" placeholder="Enter password">
      </div>
      <div class="btns-x btns-margin mt-medium" data-toggle>
        <button class="btn btn-primary">Yes, delete it!</button>
        <button class="btn btn-secondary">No, give up.</button>
      </div>
    </div>
  </div>
</div>

Sass Variables

Size

$modal-padding-rem: $spacing-medium-rem !default

$modal-in-overlay-max-width-rem: 46.153846rem !default

$modal-in-overlay-min-width-rem: 24.615384rem !default

Others

$modal-background: $background-color-muted !default

$modal-border-radius: $border-radius-main !default

$modal-box-shadow: null !default