Customize a modern websites with F1 Library.

A utility Javascript library that can be used for modals, notifications, tooltips, and more.

Get Started

Popup.js

The F1 Popup component allows for multiple popups to be displayed simultaneously and automatically manages the `z-index` of the popups to ensure proper stacking order.

Getting Started

To use the F1 Popup, download and include the `popup.js` and `popup.css` script in your HTML document:

The F1 Popup component allows for multiple popups to be displayed simultaneously and automatically manages the `z-index` of the popups to ensure proper stacking order.

The minimum required anatomy of a Popup's HTML should include an HTML element with class `popup` (or your custom base class) and at least one child element with class `popup__content`. Other component elements like `popup__title` are optional.

Configuration Options

The popup can be configured with the following options:

Option Type Default Description
`el` HTMLElement `null` Existing HTML element to use as the popup.
`anchor` HTMLElement `null` Anchor element relative to which the popup is positioned.
`mountMethod` String `'append'` Method to mount the popup: `'append'`, `'prepend'`, `'after'`, `'before'`.
`className` String `'popup'` The base CSS class name(s) for the popup element. `{bcn}`
`theme` String `null` Adds a theme-specific `${bcn}__${theme}` CSS class to the popup element.
`type` String `null` Type of popup: `'modal'`, `'alert'`, `'toast'`, `'notification'`, `'tooltip'`, `'dropdown'`.
`size` String `null` Size of the popup: `'small'`, `'medium'`, `'large'`.
`modal` Boolean `false` Whether the popup is modal.
`title` String `null` Popup header title text.
`message` String `null` Popup message text.
`content` String `null` Content to display inside the popup.
`buttons` Array `[]` Array of button objects to display in the popup footer.
`timer` Number `null` Auto-close timer in milliseconds.
`backdrop` String `null` Backdrop type: `'transparent'`, `'dim'`, `'opaque'`.
`position` String `null` Position of the popup: `'center'`, `'top'`, `'bottom'`, `'bottom-right'`.
`animation` String `null` Animation for opening/closing: `'none'`, `'fade'`, `'slide'`.
`closeX` String/Bool `true` Enables the default or a custom close (`x`) style button top-right.
`draggable` Boolean `false` Whether the popup is draggable.
`clickAwayClose` Boolean `false` Closes the popup when clicking outside of it.
`escapeKeyClose` Boolean `false` Closes the popup when the escape key is pressed.
`trapFocus` Boolean `true` Traps TAB focus within the popup when opened.
`beforeClose` Function `() => {}` Function to call before the popup closes.
`afterClose` Function `() => {}` Function to call after the popup closes.
`beforeOpen` Function `() => {}` Function to call before the popup opens.
`afterOpen` Function `() => {}` Function to call after the popup opens.

CSS Classes

The F1 Popup component comes with a set of CSS styles and classes that can be used to customize its appearance. The default base class name is `popup`, but you can change it via the `className` constructor option if it clashes with other components.

Here are some of the key classes, with `{bcn}` representing the base class name:

  • `{bcn}`: Base class for the popup.
  • `{bcn}__header`: Container for the popup header.
  • `{bcn}__title`: Title of the popup.
  • `{bcn}__close`: Button to close the popup.
  • `{bcn}__content`: Container for the main content of the popup.
  • `{bcn}__footer`: Container for the footer buttons.
  • `{bcn}__button`: Styles for buttons within the popup.
  • `{bcn}--small`, `{bcn}--medium`, `{bcn}--large`: Size modifiers for the popup.
  • `{bcn}--center`, `{bcn}--top`, `{bcn}--bottom`, `{bcn}--bottom-right`: Position modifiers for the popup.

Methods

Method Description
`show(options = {})` Displays the popup. Optional `options` can override `content`, `title`, and `animation`.
`close(options = {})` Closes the popup. Optional `options` can specify `animation`.
`mount()` Mounts the popup element to the DOM. Typically called internally by `show()`.
`dismount()` Removes the popup element from the DOM. Typically called internally by `close()`.

Components

Buttons

The `buttons` property can be used to add interactive buttons to the popup. Here are various ways to use it:

Simple OK and Cancel Buttons:

var simpleButtons = new F1.lib.Popup({ title: 'Simple Buttons', content: 'This popup has simple OK and Cancel buttons.', buttons: [ { text: 'OK', onClick: function() { alert('OK clicked'); } }, { text: 'Cancel', onClick: function() { simpleButtons.close(); } } ] }); simpleButtons.show();

Output:

Custom Styled Button

var styledButtons = new F1.lib.Popup({ title: 'Styled Buttons', content: 'This popup has custom styled buttons.', buttons: [ { text: 'Confirm', className: 'btn-confirm', onClick: function() { alert('Confirmed!'); } }, { text: 'Dismiss', className: 'btn-dismiss', onClick: function() { styledButtons.close(); } } ] }); styledButtons.show();

Output:

Buttons with Dynamic Content

var dynamicContentPopup = new F1.lib.Popup({ title: 'Dynamic Content', content: 'Initial content.', buttons: [ { text: 'Update Content', onClick: function() { dynamicContentPopup.show({ content: 'Updated content.' }); } }, { text: 'Close', onClick: function() { dynamicContentPopup.close(); } } ] }); dynamicContentPopup.show();

Output:

Form Submission Button

var formPopup = new F1.lib.Popup({ title: 'Form Submission', content: `




`, buttons: [ { text: 'Submit', onClick: function() { var form = document.getElementById('popupForm'); alert('Form submitted: ' + form.name.value + ', ' + form.email.value); } }, { text: 'Close', onClick: function() { formPopup.close(); } } ] }); formPopup.show();

Output:

Popup Types

Alert

var alertPopup = new F1.lib.Popup({ theme: 'danger', type: 'alert', backdrop: 'dim', title: 'Alert!', animation: 'fade', content: 'This is an alert popup.', }); alertPopup.show();

Output:

Toast

var toast = new F1.lib.Popup({ type: 'toast', timer: 3000, // Close delay position: 'bottom-right', animation: 'slide-up', content: 'This is a toast message.', }); toast.show();

Output:

Notification

var notification = new F1.lib.Popup({ theme: 'info', type: 'notification', position: 'top', content: 'This is a notification message.', }); notification.show();

Output:

Tooltip

var tooltip = new F1.lib.Popup({ type: 'tooltip', position: 'top', content: 'This is a tooltip.', anchor: document.getElementById('myButton'), }); tooltip.show();

Output:

Dropdown

var dropdown = new F1.lib.Popup({ type: 'dropdown', position: 'bottom', animation: 'slide-down', content: 'This is a dropdown.', anchor: document.getElementById('ddToggle'), }); dropdown.show();

Output:

Draggable Modal

const modal = new Modal({ elm: document.getElementById('myModal') }); document.getElementById('openModal').addEventListener('click', () => { modal.show({ title: 'My Draggable Modal', body: 'This is the draggable modal content.', footer: 'This is the footer content.' }); });

Output: