---
title: "Javascript Popup Examples | Mobiscroll"
component: "Popup"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/popup"
---

# Popup for Javascript

Pop-over examples with customizable content, button configuration and behavior. For vanilla JS to use everywhere. Last update: Oct 16, 2026

## Description

The popup provides a frame for all your pop-over needs, able to render custom content, forms or combined views.

Use it for contextual pop-ups, data entry or to inform users in a way that is consistent with all other Mobiscroll components.

It ships with features for a refined UX, including:

- Usage on mobile and desktop
- Combined views for various components
- Initialization on any custom content
- Consistent styling with all components
- Flexible button API
- Full theming support with light & dark variants
- Modal, popup, bubble and top/bottom display
- RTL support
- Button localization

## Using the popup

- [Opening closing the popup](https://demo.mobiscroll.com/javascript/popup/showing-the-popover.md) - Javascript popup & modal that can be used for various supporting roles, like event/add edit dialogs, info boxes & more.
- [Understanding display modes](https://demo.mobiscroll.com/javascript/popup/mobile-desktop-display.md) - Javascript popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning.
- [Configure buttons](https://demo.mobiscroll.com/javascript/popup/button-configuration.md) - Javascript popup component with different button configurations. Use it with or without buttons. Add custom actions.
- [Responsive](https://demo.mobiscroll.com/javascript/popup/responsive.md) - Responsive Javascript popup component. Change display modes and how the component renders across different screen sizes.

## Common use cases

- [Event creation modal](https://demo.mobiscroll.com/javascript/popup/add-event-modal.md) - Use the Javascript popup for event add/edit modals. Trigger within the event calendar component and load your own custom forms.
- [Using as a tooltip](https://demo.mobiscroll.com/javascript/popup/show-hide-tooltip-hover-in-out.md) - Use the Javascript popup with custom content on event hover within the various event calendar views.
- [Range picker with presets](https://demo.mobiscroll.com/javascript/popup/range-picker-popup-presets.md) - Use the Javascript popup to create advanced range picker components with presets and more.

## Customizing the look & feel

- [Theming capabilities](https://demo.mobiscroll.com/javascript/popup/themes-ios-material-windows.md) - Javascript Popup widget with iOS, Material, Windows look & feel. Customize colors and styling with theme builder.

## Lifecycle events

- [Lifecycle events](https://demo.mobiscroll.com/javascript/popup/event-hooks.md) - Javascript Popup demo with event hooks for custom integration and functionality. Use event handlers to customize flows.