Modal Design & Styling Notes

SA5 Modals leverage the capabilities of the Webflow designer fully, to give you complete control over how modals look. The library governs the functional aspects only;

• Triggering modals, through various triggers

• Showing and hiding modals

• Suppressing modals from automatic display, when they have already been viewed and closed

• The close button action

• The ability to close by clicking outside of the modal, on the overlay

Everything else regarding the modal design is up to you, including;

• Where the modal appears on the screen

• How big the modal is

• Corners, shadow, border, color, style, padding

• Scrolling and scrollbar styling

However, there are some important design considerations to be aware of when it comes to modal responsiveness, modal sidebars, and scrolling.

SA5's Modal cloneable has some carefully designed modals that are a great starting point to work with. We highly recommend you copy-paste from there.

Pro Tips

Best Practices for Responsive Design

• Set the width of the modal element as you want it to appear for each breakpoint.

• Set a max-height on the content part to support scrollable content.

For modal sizing you can use most units, e.g. px, vh, vw, svh, svw, dvh, dvw units, but avoid %. The modal will be wrapped in a hidden container for layout purposes so % widths will be measured from the container, not the page.

Consider styling the scrollbar.

Designer Accessibility

If the modal is only on one page, you can place your modal(s) at the bottom of the page.

Wrap it in an "admin DIV" and set the DIV to display: none.

When you want to edit the modal content, simply change the DIV to display: block, and you'll see the content.

If the modal is on multiple pages,

• Make it a component

• Place the component in an "admin div"

If your clients will be editing the modal in the designer;

Place the modal component on a Style Guide page. Since it is not wrapped in the "admin DIV" there, it will be visible and editable.

If your clients will be editing the modal using the Content Editor;

Style Guide Page

Making modals accessible and editable is important, and one of the best ways to do this is to use a Style Guide page.

It's common to make Style Guide pages draft, so that they are not published as part of the site and do not appear in SERPs- however this (??) makes them difficult to access in the Content editor (verify??). Instead, you can password protect them.

Create a

If you are tur

• Put your entire modal including the frame in a component, hidden

• Put that comp

If your clients use the Content Editor, rather than the designer, you can make the modal accessible to them by;

• Create a Style-guide folder

  • Password protect it

• In it, create pages for the main stylistic elements of your site, e.g. Blog page, Modals, etc.

• Drop your modal components on the modals page

Scroll Bars

If your modal may contain too much content to display, especially on mobile devices, we recommend that you add a scrollbar to the modal_content class in our design ( see the cloneable ).

This can be best done by adding a custom property of overflow-y: scroll

Custom properties are custom styles at the bottom of the style panel, which allow you to apply specialized CSS to your element. They are different from custom attributes, and not related to component properties.

You can custom-style the scrollbar elegantly;

<style>
    :root {
      --sa5-modal-scrollbar-color: #188fd6; /* Define the scrollbar color variable */
    }

    /* Custom scrollbar styling for WebKit browsers */
    .modal_content::-webkit-scrollbar {
      width: 12px; /* Width of the scrollbar */
    }

    .modal_content::-webkit-scrollbar-track {
      background: transparent; /* Transparent track for rounded corners to show */
    }

    .modal_content::-webkit-scrollbar-thumb {
      background-color: var(--sa5-modal-scrollbar-color);
      border-radius: 6px; /* Match the div's border radius */
      border: 3px solid var(--sa5-modal-scrollbar-color); /* Padding to inset the scrollbar */
    }

    .modal_content::-webkit-scrollbar-thumb:hover {
      background-color: #1e90ff; /* Slightly darker blue on hover */
    }

    /* Firefox scrollbar styling */
    .modal_content {
      scrollbar-width: thin;
      scrollbar-color: var(--sa5-modal-scrollbar-color) transparent;
    }
</style>

CMS-Driven Modals