Skip to main contentSkip to site searchSkip to component search
Honeycomb

Popup

The popup is an overlay containing various UI elements and a Call to Action which fully grabs the user's attention.

Popup windows are custom made modals that block interaction with the rest of the page and prompt the user with an immediate action before they can proceed.

It has a title and an optional large icon icon in the header, some contextual information and up to two actions like "OK" and "Cancel" or "Accept" and "Decline".

Please note that on the current stage we provide the layout only, javascript parts in the code example are only there for presentational purposes and will be replaced with actual plugin code once it's available. Therefore all of the modal functionalities described here must be implemented by the developer.

Popup modals require you to provide an overlay element that will cover the page and block the user from interacting with elements outside of the popup. You must implement a "tab trap" and also disable the window scroll when the panel is open.

  • Add role="dialog" and aria-modal-"true" to the popup element for accessibility;
  • Add an id to the title and pass it as aria-labelledby value to the popup for proper accessibility;
  • Add the flix-overlay element at the end of the popup;

  • When a popup is opened:

    • Move focus to the first element of the popup;
    • Create a "tab trap" so when users tab on the last element it returns focus to the first, and vice versa;
    • Block users from scrolling the page outside by adding overflow: hidden; CSS rule to the body element;

  • When the popup is closed:

    • Allow users to close the popup by clicking the overlay or pressing ESC;
    • Move focus back to the element that triggered the popup;
    • Remove the overflow: hidden' CSS rule from the body;
<button class="flix-btn flix-btn--tertiary" data-toggle="js-popup-example" data-toggle-class="flix-popup--active">
  Click me, I&#x27;m a popup!
</button>


<div class="flix-popup js-popup-example" role="dialog" aria-modal="true" aria-labelledby="popup-example-title">
  <div class="flix-popup__body">
    <div class="flix-popup__icon">
      <i class="flix-icon flix-icon--size-12 flix-icon-time" aria-label="Icon of a clock" role="img"></i>
    </div>
    <h1 class="flix-popup__title" id="popup-example-title">
      Your time is up!
    </h1>
    <div class="flix-popup__content">
      Everything is lost, there is no chance you can fix this mess!
      Be honest with yourself and surrender!
    </div>
    <div class="flix-popup__actions">
      <button class="flix-btn flix-btn--primary" data-toggle="js-popup-example" data-toggle-class="flix-popup--active">
        Keep trying
      </button>
      <button class="flix-btn flix-btn--tertiary" data-toggle="js-popup-example" data-toggle-class="flix-popup--active">
        Oh my god!
      </button>
    </div>
  </div>
  <div class="flix-overlay" data-toggle="js-popup-example" data-toggle-class="flix-popup--active"></div>
</div>
<button class="flix-btn flix-btn--tertiary" data-toggle="js-popup-example-2" data-toggle-class="flix-popup--active">
  Click me, I&#x27;m a popup!
</button>


<div class="flix-popup js-popup-example-2" role="dialog" aria-modal="true" aria-labelledby="popup-example-2-title">
  <div class="flix-popup__body">
    <h1 class="flix-popup__title" id="popup-example-2-title">
      Your time is up!
    </h1>
    <div class="flix-popup__content">
      Everything is lost, there is no chance you can fix this mess!
      Be honest with yourself and surrender!
    </div>
    <div class="flix-popup__actions">
      <button class="flix-btn flix-btn--primary" data-toggle="js-popup-example-2" data-toggle-class="flix-popup--active">
        Keep trying
      </button>
    </div>
  </div>
  <div class="flix-overlay" data-toggle="js-popup-example-2" data-toggle-class="flix-popup--active"></div>
</div>
Made with 🍯 by FlixMobility 2022