Popup Component
Synopsis: The Popup Component (Northstar) is a configurable UI element used to display additional information, alerts or any type of interactive content inside a modal overlay with scrollbar enabled to display overflowing content. This component can be configured within the current page scope, allowing CTA links to be mapped with the popup component on specified link format.
It provides the following configurable fields based on the user experience and appearance design.
Content Fields: Popup ID, Title, Container component (The Container component acts as a wrapper that enables authors to place any component within it.)
For detailed Container Component authoring steps, please click here.
Usage: All pages.
Instructions:
1.When a CTA link is configured with the prefix <#popup_> the corresponding popup will open based on the defined popupId.
Format: #popup_<popupID> Ex: #popup_forum
2.Ensure each popup has a unique popupId to avoid conflicts.
3. more than 1 CTA link can be configured for the same popup ID but the popup ID must be unique always.
Scenario 1
Popup model usage in Basic card
Ingredients: Container component, Column control with 33/33/33, 3-Basic cards (Standard), 3-Popup component
Scenario 2
Popup model usage in Resource card
Ingredients: Container component, Column control with 33/33/33, 3-Popup component, 4-Resource card, Banner Hero, Brightcove video
This test page showcases the popup component in different scenarios. Verify behaviour such as opening and closing interactions, content rendering, focus management, responsiveness, and overall user experience across desktop, tablet, and mobile devices.
This test page showcases the popup component in different scenarios. Verify behaviour such as opening and closing interactions, content rendering, focus management, responsiveness, and overall user experience across desktop, tablet, and mobile devices. This test page showcases the popup component in different scenarios. Verify behaviour such as opening and closing interactions, content rendering, focus management, responsiveness, and overall user experience across desktop, tablet, and mobile devices. This test page showcases the popup component in different scenarios. Verify behaviour such as opening and closing interactions, content rendering, focus management, responsiveness, and overall user experience across desktop, tablet, and mobile devices. This test page showcases the popup component in different scenarios. Verify behaviour such as opening and closing interactions, content rendering, focus management, responsiveness, and overall user experience across desktop, tablet, and mobile devices.
