Modal Design Notes

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

On the modal_content area, make it scrollable for larger content.

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>