Proximus design system
Important information:
Using the Design System implies following some rules: the code should be valid and same as the Design System. Meaning custom HTML & CSS override are forbidden.
Please don't forget to read Usage part of each element.

Overlayer

See deprecated code
expiry date: 30/04/2021

Overlayer inform users about a task and can contain information, require decisions, or involve multiple tasks.

last modified: 07/12/2021 15:20:04

Overview

An overlayer appears in front of web page content to provide information or ask for a decision. Overlayers disable all page functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken.

Dialogs are purposefully interruptive, so they should be used sparingly.

Messages overlayers
If you need to display a message to inform users about events in the pages (info, success, error or warning messages), please use a message box overlayer.


When to use... or not!

When to use

Overlayers are purposefully interruptive, so they should be used sparingly.

  • Grab the user's attention: Use when you want to interrupt a user's current task to catch the user's full attention to something more important.
  • Need user input: Use when you want to get information from the user.
  • Show additional information in context: Use when you want to show additional information without losing the context of the parent page.
  • Show additional information (not in context): Use when you want to show information that is not directly related to the parent page or other options that are "independent" from other pages. Ex. notifications.
When not to use
  • Modals prevent access to the main page: Don't use an overlayer if additional information outside it needs to be consulted. While a modal dialog is active a user cannot interact with the main page and is restricted to only the information in the overlayer for making decisions. Modal tasks should be easy to complete with the limited information presented in the dialog itself. If a user needs access to additional information then consider using a full page instead.
  • Don't nest modals: One modal should never trigger another modal. If the first modal task is dependent on a confirmation modal to approve then that first task should not be preformed in a modal.
  • Don't make modals full page: If a modal dialog needs more space than the large modal component allows then the content should be displayed on a page of its own and not in a modal. A modal is not an alternative to page. Don't use to display complex or large amounts of data or recreate a full app or page in a dialog.
    Please refer to the using components section for more info.

Types

An overlayer is an empty container, in which you can place different types of content such as text, forms, video, anentire grid,...

  1. Default

    The default version of the overlayer is used for standard content.

  2. Image

    The image version of the overlayer is used to illustrate your content.

    Accessibility

    Please make sure that the close button is enough visible over your image. Only for default size.


Sizes

There are 2 responsive modal sizes: default and small. Choose a size that works best for the amount of content you have. Overlayers with short messages should use a small overlayer to avoid long single lines.

  1. Default

    This is the standard width of the overlayer.

  2. Small

    You want to illustrate your content with the image overlayer type? Please always prefer the default size in this case.


Anatomy

The overlayer is composed of three distinct areas: header, content and footer areas.

Default + scrolling bar
Image
  1. Header area
    This part contain the title and/or the subtitle of the overlayer.

  2. Content area
    It contain the main content of your overlayer. You are free to compose your own content with simple components from the library, avoid complex components.
    Please refer to the using components section for more info.

  3. Footer area (optional)
    The footer should contain only button(s) and/or footnote(s).

  4. Close button
    There should always be a mean to dismiss the overlayer. Usually it will be a close button. In a few cases (e.g. when there is a cancel button) you'll not display to avoid redundancy in the course of action. Refer to Close vs Cancel section for more info

  5. Image (optional)
    Area which illustrate your content with an image. (Only for image and default overlayer).


Using components

Appropriate components to use in a dialog include form inputs and controls that aid in collecting information from the user. Other components like content switcher and structured list can be used to organize information. When possible, avoid using complex components that can complicate task completion or prolong a user's time in the modal.
A user's journey through the modal should be direct and short.

Avoid components that will direct the user away from the dialog

Avoid components like links that will take the user away from the current context and the task at hand. An overlayer's purpose is to focus the user's attention on a particular task and should not encourage any action that is not related to that task's completion.

Avoid components that hide information

When possible avoid components that hide information or choices from the user - like accordion and tabs - and require additional effort from the user to discover all the available content. Time spent in a modal should be minimal and only information needed to complete the task should be included. If there is too much information for a user to consume in a dialog context, consider using a full page instead.

Don't nest modals

As modals cannot be nested, do not use all the interruptive components: overlayer, action menu, toaster, popover, dropdown, etc.

Avoid complex interactions with data tables

When possible avoid using a data table in a overlayer as it's a complex component with its own workflow and decision making that can overly complicate a user's choice and task completion in relation to the overlayer.
If a data table is necessary then the tables should be kept as simple as possible with limited interactions. For example, you can use data table to make selections that will be incurred by the dialogs action but don't preform table functions like batch editing or batch actions inside the modal itself.

Do
Keep data table interaction simple.

Don't
Don't include complex interactions in data tables.

Close vs Cancel

When the system requires a user's decision the choices are often split between going further or dismissing the current task. If in such a situation, the close button will disappear to focus the user's attention on the buttons. In other words, when there is a cancel button, there is no close button.


Behavior

Interaction

Overlayers appear without warning, requiring users to stop their current task. They should be used sparingly, as not every choice or setting warrants interruption.

Position

Overlayers retain focus until dismissed or an action has been taken, such as choosing a setting. They shouldn't be obscured by other elements or appear partially on screen.

The overlayer is automatically placed in the centre of the viewport.

Max height and scrolling

Each overlayer has a max height in order to maintain a proper window ratio. When the overlayer content is longer than the overlayer height, a vertical scroll is automatically added on the modal content with the header and footer areas remaining fixed in place.

If your overlayer has too much scrolling, consider using the default overlayer size and not the small one. If the default overlayer height is still not enough space then this is an indicator that a full page may be needed instead.

The max height is 90% of the viewport height. As the overlayer is centered in the viewport, this means that there is a 5% spacing between the top and bottom of the overlayer.

Overlayers don't scroll with elements outside of the dialog, such as the background.

Escaping overlayers

Overlayers may be dismissed by:

  • Cancel button
  • Close button
  • Escape key
  • Click outside the overlayer
Accessibility
  • Opening modal: The element which triggers the overlayer must be keyboard accessible
  • Moving focus into the overlayer: Once the overlayer is open, the keyboard focus needs to be moved to the top of that.
  • Managing Keyboard Focus: Once the focus is moved into the overlayer, it should be "trapped" inside it until the overlayer is closed.
  • Closing the overlayer: Each overlay window must have a keyboard accessible control to close that window.
last modified: 30/09/2021 11:10:06

Sizes and colors

last modified: 08/09/2022 10:20:06
Accessibility
  • It's imperative to have a title which has an id, for example: modal_label . This id has to be the same than the aria-labelledby='modal_label' . This is used to associate the label of the overlayer to the title.
  • role='dialog' is used to indicate the role of the component.
  • Closing the overlayer:
    • title="Close the overlayer" attribute is added to <span> to display browser tooltip indicating link closes the overlayer.
    • <span class="show-for-sr">Close the overlayer</span> is added inside the <span> for screen readers to read this text indicating link closes the overlayer.
    • The copy has to be translate by language:
      EN: Close the overlayer
      FR: Fermer fenêtre
      NL: Sluit venster
      DE: Fenster schließen
Style

Add the class rs-reveal-modal-small to make it small.

For negative version, add the class rs-reveal-modal-neg to the modal and replace rs-link by rs-link-neg to make the button link negative.

Add the class rs-reveal-modal-mvh to have max height.

Razor

A razor layout has been created to help you create the perfect overlayer with ease. This layout is called: @RenderPage("overlayerLayout.cshtml") and here is how you should use it.

  1. Create a separated .cshtml file for your overlayer
  2. At the top of the page called the overlayer like this: Layout = "~/includes/layout/overlayerLayout.cshtml";
  3. Enter the needed parameters, some are optionals, with Page. in front of each one.
    Like this Page.sDialogID = "mySuperAwesomeDialog"; .
    Name Purpose Default value
    Page.sDialogID Define the id of your overlayer (string) myDialog
    Page.sDialogTitle Define the title (string) My title
    Page.sDialogSubtitle Define the subtitle (string)
    Page.bDialogIsSmall Change the overlayer size to the small version (boolean) false
    Page.bDialogIsFullHeight Change the overlayer height to the max height version (boolean) false
    Page.bDialogIsNegative Use the negative version (boolean) false
    Page.bDialogHasImage Use the overlayer with images (boolean) false
    Page.saImagesLinks Pass the visual for the 3 media queries (string[]) new[] { "assets/img/visual-s.jpg", "assets/img/visual-m.jpg", "assets/img/visual-l.jpg" }
    Page.bDialogHasCloseBtn Show or hide the close button (boolean) true
    Page.bDialogHasFooter Display a footer (boolean) false
    Page.bDialogHasScroll Use the scroll version of the overlayer (boolean) false
    Page.bDialogIsUnclosable Remove the close button and make the overlayer unclosable (boolean) false
    Page.bDialogHasNoFocus To use if your overlayer has no button / action in it (boolean) false
  4. Place the html for your content inside the @section DialogContent{}
  5. Place the html for your footer inside the @section DialogFooter{}
  6. Import your file in your main page @RenderPage("parts/mySuperOverlayer.cshtml")
  7. Pro Tips: you can easily make your overlayer automatically pop with another helper.
    @rsScripts.rsOpenDialog("#myDialog")

Default overlayer

An overlayer can only have an unique rs-modal-heading , rs-modal-content , rs-modal-footer . If you have an overlayer with multiple title/content in it, they must be placed in only one rs-modal-content .

Negative overlayer


Small overlayer


Full height overlayer


Overlayer with cancel button

In some case you could need a "cancel" button in the footer of your overlayer. In this case, you first need to remove the general "close" button and use the close-reveal-modal on your cancel to link it to the JS from Foundation.


Image overlayer


Scroll overlayer


Unclosable overlayer

Without focusable element

Accessibility

Add tabindex="-1" attribute to the reveal-modal to set the focus on the box.


Icon button overlayer

Accessibility

Pay attention to have an accessible icon with tooltip. Check the DS about Tooltips to have more info.


Patch tooltip overlayer

You can find an example in the DS about Patch.


JavaScript

How to trigger the js

Each time you add overlayer element to the page, you have to use this JS function inception.overlayer(CONTEXT);

CONTEXT refers to document or html element parent.

Overlayer is coming from Foundation 5

You could found more documentations about overlayer on Foundation 5Opens a new window.

The class close-reveal-modal is linked to the js from foundation and can be added to an element to trigger the close action.


Deprecated

EXPIRY DATE: 30/04/2021

The message overlayers below are deprecated and should no longer be used.
This element will no longer be available from the expiry date meaning the related css will be removed and the element design will be broken if it's not adapted to the new html.

Please use message box overlayer.

Class

  • rs-reveal-modal-alert-info
  • rs-reveal-modal-alert-success
  • rs-reveal-modal-alert-error
  • rs-modal-alert-icon





last modified: 16/09/2022 12:45:14

Configuration metadata

Selector: lib-overlayer

Class: OverlayerComponent

Use case example

NOT AVAILABLE LIVE PREVIEW

Inputs

Name Type Default Required Description
popUpID string test No Component unique id
options IOverlayerOptions undefined Yes Defines the configuration of the component
showModal boolean false No Shows/Hides the overlayer popup window
displaySubTitle boolean true No Show/Hide the subtitle
displayFooter boolean true No Show/Hide the footer section
closeButtonHoverTitle string undefined No The cross button on:hover text

Outputs

Name Type Description
onClose EventEmitter<ModalCloseType> Emits when the overlayer is closed. Also emits the way it was closed by cross, by ESC key or by clicking the backdrop.

Models

        export enum ModalCloseType {
            CROSS = 'CROSS',
            BACKGROUND = 'BACKGROUND',
            ESC = 'ESC',
        }

        export interface IOverlayerOptions {
            imageUrl?: string;
            displayCloseIcon?: boolean;
            smallStyle?: boolean;
            negStyle?: boolean;
            imageStyle?: boolean;
            scrollContentStyle?: boolean;
            infoStyle?: boolean;
            successStyle?: boolean;
            errorStyle?: boolean;
            congratulationStyle?: boolean;
            warningStyle?: boolean;
            backDrop?: boolean;
            closeViaBackdrop?: boolean;
            focusOnBox?: boolean;
        }