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

# Understanding display modes - React Popup demo

React popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning. For React and Next.JS.

- [Live demo](https://demo.mobiscroll.com/react/popup/mobile-desktop-display)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/pickers/popup/mobile-desktop-display)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/pickers/popup/mobile-desktop-display)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/javascript/popup/mobile-desktop-display.md), [jQuery](https://demo.mobiscroll.com/jquery/popup/mobile-desktop-display.md), [Angular](https://demo.mobiscroll.com/angular/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/react/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/react/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

```jsx
<Popup
  display="anchored"
  touchUi={true}
/>
```

```jsx
<Popup
  display="top"
  touchUi={true}
/>
```

```jsx
<Popup
  display="center"
  touchUi={true}
/>
```

```jsx
<Popup
  display="bottom"
  touchUi={true}
/>
```

## API used in this demo

- [`theme`](https://mobiscroll.com/docs/react/popup/api#opt-theme) - option
- [`themeVariant`](https://mobiscroll.com/docs/react/popup/api#opt-themeVariant) - option
- [`display`](https://mobiscroll.com/docs/react/popup/api#opt-display) - option
- [`anchor`](https://mobiscroll.com/docs/react/popup/api#opt-anchor) - option
- [`isOpen`](https://mobiscroll.com/docs/react/popup/api#opt-isOpen) - option
- [`onClose`](https://mobiscroll.com/docs/react/popup/api#event-onClose) - event

## Code

### JSX

```jsx
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [isAnchoredOpen, setAnchoredOpen] = useState(false);
  const [myAnchor, setAnchor] = useState();
  const [isTopOpen, setTopOpen] = useState(false);
  const [isCenterOpen, setCenterOpen] = useState(false);
  const [isBottomOpen, setBottomOpen] = useState(false);
  const buttonRef = useRef(null);

  const openAnchored = useCallback(() => {
    setAnchor(buttonRef.current.nativeElement);
    setAnchoredOpen(true);
  }, []);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Try different display modes</div>
        <div className="mbsc-form-group mbsc-button-group-block">
          <Button ref={buttonRef} onClick={openAnchored}>
            Try anhored display mode
          </Button>
          <Button onClick={() => setTopOpen(true)}>Try top display mode</Button>
          <Button onClick={() => setCenterOpen(true)}>Try center display mode</Button>
          <Button onClick={() => setBottomOpen(true)}>Try bottom display mode</Button>
        </div>
      </div>

      <Popup display="anchored" anchor={myAnchor} isOpen={isAnchoredOpen} onClose={() => setAnchoredOpen(false)}>
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>

      <Popup display="top" isOpen={isTopOpen} onClose={() => setTopOpen(false)}>
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>

      <Popup display="center" isOpen={isCenterOpen} onClose={() => setCenterOpen(false)}>
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>

      <Popup display="bottom" isOpen={isBottomOpen} onClose={() => setBottomOpen(false)}>
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>
    </Page>
  );
}

export default App;
```

### TSX

```tsx
import { Button, Page, Popup, setOptions } from '@mobiscroll/react';
import { useCallback, useRef, useState } from 'react';

setOptions({
  theme: 'ios',
  themeVariant: 'light'
});

function App() {
  const [isAnchoredOpen, setAnchoredOpen] = useState<boolean>(false);
  const [myAnchor, setAnchor] = useState<HTMLElement>();
  const [isTopOpen, setTopOpen] = useState<boolean>(false);
  const [isCenterOpen, setCenterOpen] = useState<boolean>(false);
  const [isBottomOpen, setBottomOpen] = useState<boolean>(false);
  const buttonRef = useRef<Button>(null);

  const openAnchored = useCallback(() => {
    setAnchor(buttonRef.current!.nativeElement);
    setAnchoredOpen(true);
  }, []);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-form-group-title">Try different display modes</div>
        <div className="mbsc-form-group mbsc-button-group-block">
          <Button ref={buttonRef} onClick={openAnchored}>
            Try anhored display mode
          </Button>
          <Button onClick={() => setTopOpen(true)}>Try top display mode</Button>
          <Button onClick={() => setCenterOpen(true)}>Try center display mode</Button>
          <Button onClick={() => setBottomOpen(true)}>Try bottom display mode</Button>
        </div>
      </div>

      <Popup display="anchored" anchor={myAnchor} isOpen={isAnchoredOpen} onClose={() => setAnchoredOpen(false)}>
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>

      <Popup display="top" isOpen={isTopOpen} onClose={() => setTopOpen(false)}>
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>

      <Popup display="center" isOpen={isCenterOpen} onClose={() => setCenterOpen(false)}>
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>

      <Popup display="bottom" isOpen={isBottomOpen} onClose={() => setBottomOpen(false)}>
        <div className="mbsc-align-center mbsc-padding">
          <img src="https://img.mobiscroll.com/demos/logo-noshadow.jpg" alt="logo" />
          <h4>Welcome to our website!</h4>
          <p>Have fun navigating through the demos.</p>
        </div>
      </Popup>
    </Page>
  );
}

export default App;
```

### 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-react.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 react
   ```

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 react --trial`.

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

## Related demos

- Previous: [Opening closing the popup](https://demo.mobiscroll.com/react/popup/showing-the-popover.md) - React 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/react/popup/button-configuration.md) - React popup component with different button configurations. Use it with or without buttons. Add custom actions.