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.

Using the popup plugin

Using the popup plugin is easy and will handle most of the javascript hard work for you:

• Include the plugin from our CDN at the end of your page:

  <script src="https://honeycomb.flixbus.com/dist/{VERSION_TAG}/js/popup.js"></script>

• Initialize the plugin:

  document.addEventListener("DOMContentLoaded", function() {
    popup.init();
  });

Building the popup:

1. Add an id to the flix-popup element and initialize it with the hidden attribute, so it's closed;
2. Use the popup id and connect it to the toggle using data-popup="{THE_POPUP_ID}";
3. In order for the plugin to work you need to tell it what are the first and last focusable elements of the popup body:

• Give each of them an id;
• Pass them to the toggle using data-firstFocusable="{THE_ELEMENT_ID}" and data-lastFocusable="{THE_ELEMENT_ID}";

1. Accessibility guidelines dictates that all dialogs must have a label:

• You can either give the popup and aria-label;
• Or you can associate the popup title with and id and aria-labelledby;

1. The plugin will take care of the following:

• Adding the right role and aria-modal values to the popup element;
• Toggling the hidden and --active modifiers to show and hide the popup;
• Adding ESC key press support for closing the popup with the keyboard;
• Creating a tab trap that doesn't allow the user to tab away from the popup (cycles tabs from the first and the last focusable items);
• Adding the close button click handler if a close button is present;

Popup with two buttons and an icon:

<button type="button" class="flix-btn flix-btn--secondary" data-popup="js-popup-example-1" data-firstfocusable="popup-example-title" data-lastfocusable="last-focusable-item-1">
  Click me and I will open a Popup!
</button>


<div id="js-popup-example-1" class="flix-popup" aria-labelledby="popup-example-title" hidden="">
  <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" tabindex="0">
      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 id="last-focusable-item-1" class="flix-btn flix-btn--tertiary">
        Oh my god!
      </button>
      <button class="flix-btn flix-btn--primary">
        Keep trying
      </button>
    </div>
  </div>
  <div class="flix-overlay"></div>
</div>

Popup with one button and no icon:

<button type="button" class="flix-btn flix-btn--secondary" data-popup="js-popup-example-2" data-firstfocusable="popup-example-2-title" data-lastfocusable="last-focusable-item-2">
  Click me and I will open a Popup!
</button>


<div id="js-popup-example-2" class="flix-popup" role="dialog" aria-modal="true" aria-labelledby="popup-example-2-title" hidden="">
  <div class="flix-popup__body">
    <h1 class="flix-popup__title" id="popup-example-2-title" tabindex="0">
      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 id="last-focusable-item-2" type="button" class="flix-btn flix-btn--primary">
        Keep trying
      </button>
    </div>
  </div>
  <div class="flix-overlay"></div>
</div>

Making it work without the plugin

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;