Modals

Codebase modals are toggle-type Activator components, that you can use for all sorts of things.

The Simplest Modal

Modal example 1a – without “click-away”

User can only dismiss the modal by clicking the “Close” button.

<button
  aria-controls="modal-1a"
  aria-expanded="false"
  data-control="toggle"
  data-scroll-lock="true"
  class="modal-control btn btn-primary"
>Modal 1a</button>

<div class="modal-wrapper">
  <div class="backdrop backdrop-shaded"></div>
  <div id="modal-1a" class="modal-panel m-3 p-3 b-thin rounded bg-color-background">
    <p>Modal content.</p>
    <button class="float-right modal-close">Close</button>
  </div>
</div>

Modal example 1b – with “click-away”

(Best practice is to include a “Close” button, but in this example I want you to try the click-away function.)

<button
  aria-controls="modal-1b"
  aria-expanded="false"
  data-control="toggle"
  data-click-away="true" 
  data-scroll-lock="true"
  class="modal-control btn btn-primary"
>Modal 1b</button>

<!-- Modal panel 1b -->

The simplest Activator modal consists of five units:

• The .modal-control button (separate, anywhere on the webpage)
• The .modal-wrapper element, containing three units:
  • The .backdrop
  • The .modal-panel element, containing:
    • The .modal-close button

The above elements have minimal styling – just enough to make the modal work. The .modal-control and .modal-close classes need to be applied to HTML <button> elements. Put no other styling on the .modal-wrapper – it is used as a hidden “pocket” for your modal backdrop and panel when not activated. Style the .modal-panel how you like, e.g. using decoration utilities and/or layouts.

The backdrop element is there to prevent user interaction with anything elsefor the purpose of adding a “click-away” to dismiss functionality. Think of the backdrop as a massive, full-screen button behind the modal panel, that a visitor can click on to dismiss the modal.

By default, the .backdrop has no background color assigned (it is invisible), but you can add the modifier .backdrop-shaded to get the semi-transparent blurred black backdrop that most of these examples are using, or you can add .backdrop-black for a fully black backdrop, as you can see in the “lightbox” examples below.

The backdrop is placed inside the modal wrapper, before the modal panel (so that it appears behind the modal panel).

Styling Modal Panels

Codebase modal panels have no styling of their own – you can use utility classes.

Use .modal-panel.modal-panel-cover for a full cover modal:

Design the modal panels any way you want. But you will want to control the width, and control the height for scrollable panels (example 3c). Use .modal-panel-cover for full cover modals.

<!-- Example 2a -->
<div class="modal-panel w-xs">...</div>

<!-- Example 2b -->
<div class="modal-panel w-lg flex flex-column">...</div>

<!-- Example 2c -->
<div class="modal-panel w-xs flex flex-column">...</div>

<!-- Example 2d -->
<div class="modal-panel modal-panel-cover">...</div>

(In addition the the modal and layout classes in the example code above, you will need decorative utility classes for borders, box shadows, background colors, etc.)

A Modal as a Lightbox

For a modal to operate as a lightbox, the modal panel needs expand to fully cover the viewport using .modal-panel.modal-panel-cover. Keep the full cover panel itself unstyled (colorless) and then totally blacken the backdrop using .backdrop.backdrop-black – so that the visitor’s eye is drawn to the image.

In the following examples the .modal-close has been absolutely positioned top right using position utilities. (Tip: putting the .box position utility on the modal wrapper enables you to absolutely position the close button in the panel top right.)

Meanwhile, the image and caption have been centered and middled using flex layout.

Codebase modals have their content images (<img> and <svg>) width and height constrained to fit within the viewport (with the height further constrained, to accommodate for the iOS Safari browser bar). Therefore, oversized images will be scaled down if necessary.

<button
  aria-controls="modal-3a"
  aria-expanded="false"
  data-control="toggle"
  data-scroll-lock="true"
  class="modal-control btn btn-primary mb-3"
>Modal example 3a</button> – modal with a tall narrow image

<div class="modal-wrapper">
  <div class="backdrop backdrop-black"></div>
  <div class="modal-panel modal-panel-cover relative t-center" id="modal-3a">
    <div class="box flex flex-column flex-center flex-middle">
      <button class="modal-close absolute top right btn btn-icon bg-transparent b-0">
        ×
      </button>
      <img src="" alt="">
      <p class="p-block t-color-ui-text t-center">Figure legend</p>
    </div>
  </div>
</div>