• Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototype
  • Acme Marketplace
  • Guidelines
  • Display
  • Navigate
  • Forms
  • Layout
  • Prototypes
    • Guidelines
    • Display
    • Navigate
    • Forms
    • Layout
    • Prototypes
    • Release Notes
    • Sass Documentation
    • Gulp Documentation
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Layout

Complex components and layout patterns

Containers
Tables
Modals
Sliders
Slats
Pricing
Feeds

Modals

Overlay Modals

An overlay modal is a traditional modal that overlays all other content on a page. Its position is fixed relative to the browser window. It sits on top of a transparent dark background that helps the modal become the primary focus point. By default, users can click outside the modal (on the modal background) to close it. If the modal requires the user to take an action (such as clicking on the primary action button), the user will not be able to click outside the modal to close it.

Usage
  1. Confirm user action
  2. Put important information into focus
  3. Require the user to make a choice before proceeding
  4. Allow the user to edit simple forms without leaving the page

alias consequatur aut perferendis sit

Voluptatem accusantium doloremque aperiam eaque. ipsa quae ab illo inventore. veritatis et quasi architecto beatae. vitae dicta sunt explicabo aspernatur. aut odit aut fugit sed

<div class="adb-modal" id="modal-medium" role="menu">
  <h3 class="adb-modal--header" data-truncate>
    quia consequuntur magni dolores eos
    <a class="adb-close" data-dismiss="modal" href="#" title="Close"></a>
  </h3>
  <div class="adb-modal--content">
    <p>
      Qui ratione voluptatem sequi nesciunt. neque dolorem ipsum quia dolor. sit amet consectetur adipisci velit. sed quia non numquam eius. modi tempora incidunt ut labore
    </p>
  </div>
  <menu class="adb-modal--footer adb-toolbar">
    <button class="adb-toolbar--item adb-button__primary" type="submit">
      Take Action
    </button>
    <button class="adb-toolbar--item adb-button__secret" data-dismiss="modal" type="button">
      Cancel
    </button>
  </menu>
</div>

Other sizes include: Large and X-Large.

et dolore magnam aliquam quaerat

Voluptatem ut enim ad minima. veniam quis nostrum exercitationem ullam. corporis nemo enim ipsam voluptatem. quia voluptas sit suscipit laboriosam. nisi ut aliquid ex ea

commodi consequatur quis autem vel

Eum iure reprehenderit qui in. ea voluptate velit esse quam. nihil molestiae et iusto odio. dignissimos ducimus qui blanditiis praesentium. laudantium totam rem voluptatum deleniti

  • Framework
  • Layout
  • Modals
  • Powered by AppDirect © 2022
  • Contact Support
  • Terms & Conditions
  • Privacy Policy
    • Contact Support
    • Terms & Conditions
    • Privacy Policy
Themes
    Assistant
    • Bonzi
    • Clippy
    • F1
    • Genie
    • Genius
    • Links
    • Merlin
    • Peedy
    • Rocky
    • Rover
    Hide
    4
    1366 × 768
    10.51%
    9
    1024 × 768
    4.02%
    3
    1280 × 800
    11.08%
    1
    1440 × 900
    16.09%
    7
    1600 × 900
    5.59%
    6
    1280 × 1024
    5.77%
    5
    1680 × 1050
    7.48%
    2
    1920 × 1080
    15.99%
    8
    1920 × 1200
    5.39%
    10
    2560 × 1440
    3.23%