POPUP: Modal dialog for essential information or actions
TYPES: Rich Content (default) | Informative (.popup-seamless) | Minimal (.popup-minimal)
ALIGNMENT: Left (default) | Center (.popup-center)
SIZES: Small (.popup-sm) | Default | Large (.popup-lg) | Extra Large (.popup-xl)
Popups block user interaction until dismissed. Use for confirmations, settings panels, and informational dialogs. Supports layered stacking with dimming and configurable dismiss modes.
Rich Content: Header has a visible bottom border separating it from the body. Body scrolls when content exceeds viewport. Footer stays fixed at the bottom with no top border. Best for settings panels, table configurations, and form inputs.
Configure visible columns and their order
Select which columns to display in the saved providers view. Drag to reorder.
<div class="tw-popup-panel" role="dialog" aria-modal="true"> <div class="tw-popup-header">...</div> <div class="tw-popup-body">...</div> <div class="tw-popup-footer">...</div></div>
Informative: Header flows seamlessly into the body with no border. Best for confirmation dialogs with explanatory text and information popups.
The course eligibility algorithm takes multiple factors into account when matching you to sixth form and college courses. Understanding these factors helps you put forward the strongest possible application.
Academic Performance — Your current school reports and predicted grades are weighted based on each provider's entry requirements. For Year 12 entry, GCSE results carry the highest weight.
Interview Performance — If shortlisted, your interview score is factored into the match. Providers normalise scores to ensure fair comparison across all applicants.
Special Considerations — Sibling at provider, bursary eligibility, and catchment area are noted separately rather than modifying your base score, ensuring transparency in the final outcome.
<div class="tw-popup-panel popup-seamless">...</div>
Minimal: No header at all — body content starts immediately with extra top padding. Best for simple confirmations with an icon, success messages, and yes/no prompts.
Application Submitted!
Your Year 12 application has been successfully submitted. You will receive a confirmation email shortly.
<div class="tw-popup-panel tw-popup-minimal tw-popup-center tw-popup-sm">...</div>
Center: Centers text in header, body, and footer. Combine with any type. Best for confirmation dialogs and simple prompts.
Are you sure you want to permanently delete the application for James Thompson? This action cannot be undone and all associated documents will be removed.
<div class="tw-popup-panel popup-center">...</div>
Sizes: .popup-sm (400px) |
Default (520px) |
.popup-lg (680px) |
.popup-xl (860px).
All sizes are responsive and shrink gracefully on mobile.
This popup is 400px wide. Ideal for simple confirmations and quick prompts.
This popup is 520px wide. The standard size for most use cases including forms and settings.
This popup is 680px wide. Good for rich content, multi-column forms, and detailed settings.
This popup is 860px wide. Suitable for complex settings panels, large data tables, and multi-step flows.
<div class="tw-popup-panel popup-sm"> |
<div class="tw-popup-panel"> |
<div class="tw-popup-panel popup-lg"> |
<div class="tw-popup-panel popup-xl">
Scrollable: When body content exceeds the viewport, only the body scrolls. Header and footer remain fixed in place.
Please read carefully before proceeding
All personal data collected through the application process is handled in accordance with the Data Protection Act 2018 and UK GDPR. The provider acts as a data controller and processes applicant information solely for the purpose of managing application decisions.
Applications must be submitted by the published deadline. Late applications may be considered at the provider's discretion but will not be given priority over timely submissions. All information provided must be accurate and complete.
The provider reserves the right to assess applicants through interviews, entrance examinations, or portfolio reviews as appropriate. Selection criteria are published annually and applied consistently to all applicants.
Offers of places are conditional upon acceptance within the specified timeframe. Failure to respond by the deadline may result in the offer being withdrawn and the place offered to the next applicant on the waiting list.
Where the provider is oversubscribed, a waiting list will be maintained until the end of the autumn term. Position on the waiting list is determined by the application criteria and may change as new applications are received.
Parents have the right to appeal against a decision to refuse admission. Appeals are heard by an independent panel and the provider will supply information about the appeals process with any refusal notification.
A non-refundable registration fee is required at the time of application. Upon acceptance of a place, a deposit is payable which will be credited against the first term's fees. Full fee schedules are available from the provider's admissions office.
No Close Button: The close button (.popup-close) is optional.
Omit it when the user must make an explicit choice from the footer actions.
The popup can still be closed via overlay click or Escape key.
You have unsaved changes. Would you like to save before leaving this page?
Stacking: When a second popup opens, the first popup is dimmed
(.popup-dimmed) and the new overlay is transparent to avoid double-darkening.
Closing the top popup un-dims the one underneath. Focus is trapped in the topmost popup.
Manage your application deadline and open day reminders
Manage your notification preferences for upcoming application deadlines and open days.
This will reset all notification settings to their default values. Are you sure you want to continue?
Dismiss Mode: Controls what happens when the overlay is clicked or Escape is pressed.
data-popup-dismiss-mode-value="single" (default) — Closes only the topmost popup.
data-popup-dismiss-mode-value="all" — Closes all open popups at once.
Click the overlay or press Escape to close only this popup. This is the default behavior.
With data-popup-dismiss-mode-value="all", clicking the overlay or pressing Escape closes all open popups at once.
Accessibility: Popups use role="dialog" with aria-modal="true".
Focus is trapped inside the popup — Tab cycles through focusable elements and wraps at boundaries.
Escape closes the popup. Focus returns to the trigger element on close.
Use aria-labelledby to link to the title, or aria-label for minimal popups without a visible title.
| Key | Action |
|---|---|
Escape |
Closes the topmost popup (or all, based on dismiss mode) |
Tab |
Cycles forward through focusable elements within the popup |
Shift + Tab |
Cycles backward through focusable elements within the popup |