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 class="mb-small">
    Do you really want to delete this article?
    This operation is permanent, think twice.
  </p>
  <button class="btn btn-primary mr-small">Yes, delete it!</button>
  <button class="btn btn-secondary">No, give up.</button>
</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-toggleable>
  <div class="overlay-body">
    <div class="modal" data-toggleable="false">
      <h4>Are You Serious?</h4>
      <div class="fm-group mb-medium">
        <label class="fm-label" for="pwd">This operation is permanent, password must be entered to confirm.</label>
        <div class="fm fm-text">
          <input type="password" id="pwd" name="pwd" placeholder="E.g., Mypassword@12345">
        </div>        
      </div>
      <button class="btn btn-primary mr-small" data-toggleable>Yes, delete it!</button>
      <button class="btn btn-secondary" data-toggleable>No, give up.</button>
    </div>
  </div>
</div>

Sass Variables

Size

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

$modal-in-overlay-max-width-rem: px-to-rem(640px) !default

$modal-in-overlay-min-width-rem: px-to-rem(320px) !default

Others

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

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

$modal-box-shadow: null !default