A special type of modal that can be triggered when the page loads (Enter Popup) or when the user tries to leave the page (Exit Popup). This makes it ideal for welcome messages, promotions, or exit-intent offers.
About
The Popup component provides flexible control over when and how it appears. You can trigger it on page entry, exit, or both using the trigger prop. The content of the popup can be customized separately for entry (entryContent) and exit (exitContent). You can also control whether it repeats on every visit, how the backdrop behaves, and apply custom styles.
Example
The following examples show how to use the Popup component with different triggers and content configurations. You can display a popup when the page loads (onEntry), when the user tries to leave (onExit), or for both events (onEntryExit).
<script>
import { Popup } from "theui-svelte";
</script>
<Popup>
Hello! I'm popup!
</Popup>Trigger Event
The trigger prop defines when the Popup appears. It supports three values: 'onEntry', 'onExit', and 'onEntryExit'. The default value is 'onEntry'.
Entry Popup
When trigger is set to 'onEntry', the popup will automatically appear as soon as the page loads. No user interaction is needed to trigger it.
<Popup trigger="onEntry"> <!-- Or just <Popup> as onEntry is default -->
This is entry popup!
</Popup>Exit Popup
With trigger set to 'onExit', the popup will appear when the user moves their cursor toward the browser’s close button or attempts to leave the page.
<Popup trigger="onExit">
This is exit popup!
</Popup>Both Entry-Exit Popup
Setting trigger to 'onEntryExit' will make the popup appear both when the page loads and when the user tries to exit. It combines the behaviors of 'onEntry' and 'onExit'.
<Popup trigger="onEntryExit">
The popup appears in both entry and exit time!
</Popup>Above example will display same content on entry and exit popup! But if you want, you can provide separate content for both entry and exit popup using the entryContent and exitContent snippet.
<Popup trigger="onEntryExit">
{#snippet entryContent()}
<p class="text-success-500 font-bold">I'm content from entry popup!</p>
{/snippet}
{#snippet exitContent()}
<p class="text-error-500 font-bold">I'm content from exit popup!</p>
{/snippet}
</Popup>Popup Repetition
The repeat prop controls how often the Popup appears. It accepts three values: true, false, and 'page'. The default value is true.
true- The popup will appear every time the page loads, even if the user reloads the same page. This is the default behavior.false- The popup will appear only once, and it won’t show again, even if the user navigates to a different page.'page'- The popup will appear once per page. If the user moves to another page, it will show again, but it won’t repeat on the same page.
This feature allows precise control over popup behavior across pages. For example, to display the popup only once per visitor, set repeat={false}. To show the popup once per page the visitor visits, set repeat="page".
Popup Backdrop
Static Backdrop
The staticBackdrop prop controls whether the Popup closes when clicking on the backdrop. By default, the backdrop is clickable, and clicking it will close the Popup. Setting staticBackdrop to true makes the backdrop static, meaning the Modal will remain open even when the backdrop is clicked.
<Popup staticBackdrop={true}>
This popup has a static backdrop!
</Popup>Backdrop Customization
The backdrop prop manages the visibility and style of the backdrop. When set to true (default), the backdrop is visible. If set to false, the backdrop will be hidden. You can also customize the backdrop by passing custom CSS classes, which will apply directly to the backdrop.
<!-- No backdrop -->
<Popup backdrop={false}>
This popup has no backdrop!
</Popup>
<!-- Custom backdrop -->
<Popup backdrop="bg-brand-primary-500/80">
This popup has a custom backdrop!
</Popup>Rounded Corners
TThe rounded prop controls the corner radius of the Popup, ensuring design consistency. While custom CSS classes can be used for styling, this prop provides a standardized way to apply consistent rounding across the component. Available values are: none, sm, md, lg, xl, and full. Default value md.
<Popup rounded="none">
This popup has no rounded corners!
</Popup>Customization
You can pass your custom classes to the Popup component using the class attribute. These classes directly applies to the popup component.
<Popup class="border-4 border-brand-primary-200 bg-brand-primary-500 text-on-brand-primary-500">
This is a custom popup with some extra classes!
</Popup>Accessibility
The Alert Popup component is designed to be accessible for all users, including those with disabilities. Here's how it works:
- Focus Management: When the popup opens, focus will automatically go to the first clickable element inside it, such as the close button, allowing keyboard users to interact with it right away.
- Keyboard Navigation: You can use the Tab key to move through the popup and the Esc key to close it, making it easy to navigate with a keyboard.
- Aria Roles: The popup has aria-labelledby for screen readers to announce the title and
role="dialog"to let users know it's a modal window. - Backdrop Handling: When the popup is open, the backdrop is hidden from screen readers, so users can focus on the popup content.
- Custom Content: The
entryContentandexitContentprops allow you to add any content you need, ensuring it's clear for screen readers.
The Popup is built to work well with screen readers and keyboard navigation, making sure everyone can use it comfortably.