---
title: "Javascript Popup Responsive Example | Mobiscroll"
component: "Popup"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/popup/responsive"
---
# Responsive - JavaScript Popup demo
Responsive Javascript popup component. Change display modes and how the component renders across different screen sizes. Plain JS api for usage everywhere.
- [Live demo](https://demo.mobiscroll.com/javascript/popup/responsive)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/pickers/popup/responsive)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/popup/responsive.md), [Angular](https://demo.mobiscroll.com/angular/popup/responsive.md), [React](https://demo.mobiscroll.com/react/popup/responsive.md), [Vue](https://demo.mobiscroll.com/vue/popup/responsive.md)
## Description
The popup component adapts fluidly to its environment. There are times however when you would like to set the component up responsively.
Use the [`responsive` option](https://mobiscroll.com/docs/javascript/select/api#opt-responsive) to configure the popup and change the options based on the viewport width. There are five predefined breakpoints:
- `xsmall` - min-width: 0px
- `small` - min-width: 576px
- `medium` - min-width: 768px
- `large` - min-width: 992px
- `xlarge` - min-width: 1200px
- use `custom` for setting a custom `breakpoint`
It is a good idea to adjust the `display` to tailor the UX. This allows you to have the popup **bottom-positioned on mobile devices**, **centered on tablets**, and **anchored to input on larger screens** to enhance the user experience.
## What this demo shows
- A responsive popup that uses different display modes across touch and desktop layouts.
- **Viewport switcher** A segmented control above the popup switches between viewport presets.
- **Small screen layout** At the `375px` viewport preset, the popup opens at the bottom of the screen.
- **Medium screen layout** At the `576px` and `768px` viewport presets, the popup opens as a centered modal.
- **Large screen layout** At the `992px` and `1200px` viewport presets, the popup opens as a popover anchored to the button.
- **Popup layout** The popup uses a custom layout for its content.
- **Custom content** The popup contains a custom image or logo, a heading, and descriptive text.
- **Visual separation** A modal overlay and shadow separate the popup from the underlying content.
## Best for
- **Cross-device workflows** Presenting the same popup content in layouts suited to phones, tablets, and desktop screens.
- **Touch-friendly interactions** Positioning popups at the bottom of small screens for easier access on touch devices.
- **Focused tablet experiences** Displaying popup content in a centered modal at medium viewport widths.
- **Contextual desktop actions** Anchoring a popover to its trigger on larger screens so the popup stays visually connected to the action that opened it.
- **Responsive applications** Changing popup display options at predefined or custom breakpoints without maintaining separate implementations for each screen size.
## Tutorial
```js
responsive: {
xsmall: {
display: 'bottom',
},
small: {
display: 'center',
},
custom: { // Custom breakpoint
breakpoint: 800,
display: 'anchored'
}
}
```
## API used in this demo
- [`theme`](https://mobiscroll.com/docs/javascript/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/javascript/popup/api#opt-themeVariant) - option
- [`responsive`](https://mobiscroll.com/docs/javascript/popup/api#opt-responsive) - option
- [`display`](https://mobiscroll.com/docs/javascript/popup/api#opt-display) - option
- [`anchor`](https://mobiscroll.com/docs/javascript/popup/api#opt-anchor) - option
- [`open`](https://mobiscroll.com/docs/javascript/popup/api#method-open) - method
## Code
### JS
```js
mobiscroll.setOptions({
theme: 'ios',
themeVariant: 'light'
});
var popup = mobiscroll.popup('#demo-popup-responsive', {
responsive: {
xsmall: {
display: 'bottom',
},
small: {
display: 'center',
},
custom: {
// Custom breakpoint
breakpoint: 800,
display: 'anchored',
anchor: document.getElementById('demo-popup-show-btn'),
},
},
});
document.getElementById('demo-popup-show-btn').addEventListener('click', function () {
popup.open();
});
```
### HTML
```html
```
### CSS
```css
/* style */
```
## Implementation notes
- `responsive` is an object keyed by breakpoint name, each value an object of popup options (`display`, `anchor`, etc.) applied once the viewport reaches that breakpoint's minimum width.
- Predefined breakpoint keys and their `min-width` thresholds: `xsmall` (0px), `small` (576px), `medium` (768px), `large` (992px), `xlarge` (1200px). The matching options apply from that width up to the next defined breakpoint.
- A `custom` key defines an arbitrary breakpoint via a `breakpoint` (pixel width) property alongside the options to apply at that width, e.g. `custom: { breakpoint: 800, display: 'anchored' }` - `custom` can be combined with the predefined keys in the same `responsive` object.
- In this demo: `xsmall: { display: 'bottom' }` (mobile - popup slides up from the bottom), `small: { display: 'center' }` (tablet - centered modal), and `custom: { breakpoint: 800, display: 'anchored' }` (wider desktop - popup anchors to the trigger button).
- When the active breakpoint sets `display: 'anchored'`, an `anchor` must also be supplied (either inside that breakpoint's options or as a top-level option) so the popup has an element to position against.
- Options set via `responsive` override the popup's top-level options once their breakpoint is active; options not overridden at a given breakpoint fall back to the top-level (or default) value.
- Framework binding: JS/jQuery pass `responsive` inside `.popup({ responsive: {...} })`; React passes it as a `responsive` prop object on ``; Vue defines the object in the `