---
title: "Javascript Popup Understanding display modes Example | Mobiscroll"
component: "Popup"
framework: "JavaScript"
library_version: "6.1.5"
url: "https://demo.mobiscroll.com/javascript/popup/mobile-desktop-display"
---

# Understanding display modes - JavaScript Popup demo

Javascript popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning. Plain JS api for usage everywhere.

- [Live demo](https://demo.mobiscroll.com/javascript/popup/mobile-desktop-display)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-javascript/tree/main/src/demos/pickers/popup/mobile-desktop-display)
- This demo in other frameworks: [jQuery](https://demo.mobiscroll.com/jquery/popup/mobile-desktop-display.md), [Angular](https://demo.mobiscroll.com/angular/popup/mobile-desktop-display.md), [React](https://demo.mobiscroll.com/react/popup/mobile-desktop-display.md), [Vue](https://demo.mobiscroll.com/vue/popup/mobile-desktop-display.md)

## Description

The popup has four built-in display modes that can be controlled through the [`display`](https://mobiscroll.com/docs/javascript/select/api#opt-display) option:

- `top` - popup that slides down from the top
- `bottom` - popup that slides up from the bottom
- `center` - popup that shows up in the middle with a pop animation
- `anchored` - popup that shows up anchored to an input or any dom element

The defaults change on a theme-to-theme basis. it defaults to `bottom` for the iOS theme and to `center` for all other themes.

**Want to see how to set up responsiveness?** [Check out this example →](https://demo.mobiscroll.com/javascript/popup/responsive)

## What this demo shows

- Four popup examples demonstrate the supported display modes.
- **Anchored popup** Opens from a button and positions the popup below to that button or another DOM element.
- **Top popup** Opens as a modal that slides down from the top of the viewport.
- **Center popup** Opens in the middle of the viewport with a pop animation.
- **Bottom popup** Opens as a modal that slides up from the bottom of the viewport.
- **Modal layout** Each popup uses a custom layout and content.
- **Custom content** Each popup contains a custom image or logo, a heading, and descriptive text.
- **Button actions** The Cancel button dismisses the popup, while the blue Ok button confirms it.
- **Visual separation** A modal overlay and shadow separate the popup from the underlying content.

## Best for

- **Anchored popups** Contextual information or actions that need to remain visually connected to an input or another page element.
- **Top popups** Messages and prompts that should enter from the top of the viewport.
- **Center popups** Confirmations and focused messages that need a prominent position in the viewport.
- **Bottom popups** Mobile-friendly prompts and actions that should enter from the bottom of the viewport.

## Tutorial

```js
{
  display: 'anchored',
  touchUi: true
}
```

```js
{
  display: 'top',
  touchUi: true
}
```

```js
{
  display: 'center',
  touchUi: true
}
```

```js
{
  display: 'bottom',
  touchUi: true
}
```

## 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
- [`display`](https://mobiscroll.com/docs/javascript/popup/api#opt-display) - option
- [`buttons`](https://mobiscroll.com/docs/javascript/popup/api#opt-buttons) - option
- [`touchUi`](https://mobiscroll.com/docs/javascript/popup/api#opt-touchUi) - 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 bottomPopup = mobiscroll.popup('#demo-popup-bottom', {
  display: 'bottom',
  buttons: ['ok', 'cancel'],
});

var topPopup = mobiscroll.popup('#demo-popup-top', {
  display: 'top',
  buttons: ['ok', 'cancel'],
});

var centerPopup = mobiscroll.popup('#demo-popup-center', {
  display: 'center',
  buttons: ['ok', 'cancel'],
  touchUi: false,
});

var anchoredPopup = mobiscroll.popup('#demo-popup-anchored', {
  display: 'anchored',
  anchor: document.getElementById('demo-popup-anchored-btn'),
  buttons: ['ok', 'cancel'],
});

document.getElementById('demo-popup-bottom-btn').addEventListener('click', function () {
  bottomPopup.open();
});

document.getElementById('demo-popup-top-btn').addEventListener('click', function () {
  topPopup.open();
});

document.getElementById('demo-popup-center-btn').addEventListener('click', function () {
  centerPopup.open();
});

document.getElementById('demo-popup-anchored-btn').addEventListener('click', function () {
  anchoredPopup.open();
});
```

### HTML

```html
<div class="mbsc-form-group">
  <div class="mbsc-form-group-title">Try different display modes</div>
  <div class="mbsc-form-group mbsc-button-group-block">
    <button mbsc-button id="demo-popup-anchored-btn">Try anhored display mode</button>
    <button mbsc-button id="demo-popup-top-btn">Try top display mode</button>
    <button mbsc-button id="demo-popup-center-btn">Try center display mode</button>
    <button mbsc-button id="demo-popup-bottom-btn">Try bottom display mode</button>
  </div>
</div>
<div style="display: none;"> 
  <div id="demo-popup-bottom">
    <div class="mbsc-align-center mbsc-padding">
      <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg">
      <h4>Welcome to our website!</h4>
      <p>Have fun navigating through the demos.</p>
    </div>
  </div>
  <div id="demo-popup-top">
    <div class="mbsc-align-center mbsc-padding">
      <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg">
      <h4>Welcome to our website!</h4>
      <p>Have fun navigating through the demos.</p>
    </div>
  </div>
  <div id="demo-popup-center">
    <div class="mbsc-align-center mbsc-padding">
      <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg">
      <h4>Welcome to our website!</h4>
      <p>Have fun navigating through the demos.</p>
    </div>
  </div>
  <div id="demo-popup-anchored">
    <div class="mbsc-align-center mbsc-padding">
      <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg">
      <h4>Welcome to our website!</h4>
      <p>Have fun navigating through the demos.</p>
    </div>
  </div>
</div>
```

### CSS

```css
/* style */
```

## Implementation notes

- `display` accepts four values: `'top'` (slides down from the top edge), `'bottom'` (slides up from the bottom edge), `'center'` (pops up centered with a scale/fade animation), and `'anchored'` (positions relative to a DOM element rather than the viewport).
- Default `display` is theme-dependent: `'bottom'` for the iOS theme, `'center'` for Material/Windows and other themes - set `display` explicitly to override the theme default.
- `display: 'anchored'` requires an `anchor` value (a DOM element) to position against; without a valid `anchor` the popup has nothing to attach to. In JS/jQuery, `anchor` is set as a plain DOM element reference in the options object (JS: `anchor: document.getElementById('trigger-btn')`; jQuery: `anchor: $('#trigger-btn')[0]`); React/Vue instead track the anchor element in state (captured from a `ref`, e.g. via `buttonRef.current.nativeElement`) and bind it as the `anchor`/`:anchor` prop.
- `touchUi` (shown per-mode in this demo) controls whether the popup renders touch-optimized (mobile-style) or desktop-style controls independent of `display`; it can be combined with any of the four `display` modes.
- Framework binding for `display`/`touchUi`: React passes them as `display`/`touchUi` props on `<Popup>`; Vue as `display`/`:touchUi` on `<MbscPopup>`; Angular as a plain `display="..."` attribute plus `[touchUi]="..."` binding on `<mbsc-popup>`; JS/jQuery pass both inside the `.popup({ display: '...', touchUi: ... })` options object.
- Opening each mode is imperative in JS/jQuery: each display mode is a separate popup instance - JS captures it directly from the return value of `mobiscroll.popup('#id', {...})`, jQuery instead calls `$('#id').mobiscroll().popup({...}).mobiscroll('getInst')` - and its trigger button's click handler calls that instance's `.open()`. React binds each mode's visibility to its own boolean state variable through the `isOpen` prop, set to `true` by the corresponding trigger button's `onClick` and reset to `false` in `onClose`.
- `buttons: ['ok', 'cancel']` renders the predefined confirm/dismiss buttons in the popup footer for every display mode in this demo.

## Run it in your project

1. If not signed up yet, or don't own a license, you can [start a free trial](https://mobiscroll.com/starttrial).

2. Clone the repository:

   ```
   git clone https://github.com/acidb/mobiscroll-demos-javascript.git
   ```

3. If not installed yet, install the Mobiscroll CLI from NPM:

   ```
   npm install -g @mobiscroll/cli
   ```

4. Config Mobiscroll - open a terminal window in the root directory and run:

   ```
   mobiscroll config javascript
   ```

5. Install dependencies - open a terminal window in the root directory and run:

   ```
   npm install
   ```

6. Run the project:

   ```
   npm run dev
   ```

On a trial, add `--trial` to the config command: `mobiscroll config javascript --trial`.

Running a demo locally requires a Mobiscroll trial or a license; setup is per framework at https://mobiscroll.com/docs/javascript/getting-started/installation

## Related demos

- Previous: [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.
- Next: [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.