---
title: "React Popup Opening closing the popup Example | Mobiscroll"
component: "Popup"
framework: "React"
library_version: "6.2.0"
url: "https://demo.mobiscroll.com/react/popup/showing-the-popover"
---

# Opening closing the popup - React Popup demo

React popup & modal that can be used for various supporting roles, like event/add edit dialogs, info boxes & more. For React and Next.js.

- [Live demo](https://demo.mobiscroll.com/react/popup/showing-the-popover)
- [View React JS code on GitHub](https://github.com/acidb/mobiscroll-demos-react/tree/main/src/demos/pickers/popup/showing-the-popover)
- [View React TS code on GitHub](https://github.com/acidb/mobiscroll-demos-react-ts/tree/main/src/demos/pickers/popup/showing-the-popover)
- This demo in other frameworks: [JavaScript](https://demo.mobiscroll.com/popup/showing-the-popover.md), [jQuery](https://demo.mobiscroll.com/jquery/popup/showing-the-popover.md), [Angular](https://demo.mobiscroll.com/angular/popup/showing-the-popover.md), [Vue](https://demo.mobiscroll.com/vue/popup/showing-the-popover.md)

## Description

Use the popup to render any content or form in a modal box that can be programmatically shown or hidden. For that the [`isOpen`](https://mobiscroll.com/docs/react/popup/api#opt-isOpen) option can be used.

To check whether the popup is opened or not, use the [`isVisible`](https://mobiscroll.com/docs/react/popup/api#method-isVisible) method.

## What this demo shows

- This demo shows a popup which can be opened and closed with buttons.
- **Opening and closing** Buttons programmatically open and close the popup.
- **Modal layout** The popup appears as a centered modal with a custom layout and content.
- **Custom content** The popup contains a custom image or logo, a heading, and descriptive text.
- **Close action** A Close button dismisses the popup.
- **Visual separation** A modal overlay and shadow separate the popup from the underlying content.

## Best for

- **Welcome messages** Present introductory content when users enter a page or workflow.
- **Announcements** Display important updates or notices in a focused modal.
- **Confirmations** Ask users to acknowledge information or confirm an action.
- **Promotional content** Highlight a promotion with custom imagery and supporting text.
- **Custom modal interactions** Present focused content that users can dismiss before returning to the underlying page.

## Tutorial

```jsx
const [isPopupOpen, setPopupOpen] = useState(false);
                        
<Button onClick={() => setPopupOpen(true)}>
  Open popup
</Button>

<Popup 
  display="center" 
  isOpen={isPopupOpen} 
  onClose={() => setPopupOpen(false)}
>
  <!-- popup content -->
  <Button onClick={() => setPopupOpen(false)}>
    Close
  </Button>
</Popup>
```

## 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
- [`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 { useState } from 'react';

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

function App() {
  const [isPopupOpen, setPopupOpen] = useState(false);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-button-group-block">
          <Button onClick={() => setPopupOpen(true)}>Open popup</Button>
        </div>
      </div>

      <Popup display="center" isOpen={isPopupOpen} onClose={() => setPopupOpen(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>
        <div className="mbsc-button-group-block">
          <Button onClick={() => setPopupOpen(false)}>Close</Button>
        </div>
      </Popup>
    </Page>
  );
}

export default App;
```

### TSX

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

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

function App() {
  const [isPopupOpen, setPopupOpen] = useState<boolean>(false);

  return (
    <Page>
      <div className="mbsc-form-group">
        <div className="mbsc-button-group-block">
          <Button onClick={() => setPopupOpen(true)}>Open popup</Button>
        </div>
      </div>

      <Popup display="center" isOpen={isPopupOpen} onClose={() => setPopupOpen(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>
        <div className="mbsc-button-group-block">
          <Button onClick={() => setPopupOpen(false)}>Close</Button>
        </div>
      </Popup>
    </Page>
  );
}

export default App;
```

## Implementation notes

- The popup is opened and closed with the `.open()` and `.close()` instance methods - there is no option that shows the popup on init; visibility is always driven by calling these methods.
- `isVisible` (a method on the popup instance) returns whether the popup is currently open, for cases where code needs to check state rather than react to the `onOpen`/`onClose` events.
- `display: 'center'` renders the popup as a centered modal (used in this demo); `showOverlay: false` removes the dimmed backdrop that normally sits behind the popup; `closeOnOverlayClick: false` prevents clicking outside the popup from dismissing it, so the `Close` button is the only way to dismiss it.
- `focusOnOpen: false` prevents the popup from auto-focusing its first focusable element when it opens.
- Opening/closing is imperative everywhere except React and Vue: JS captures the popup instance directly from the return value of `mobiscroll.popup(...)`; jQuery instead calls `.mobiscroll('getInst')` once to get it; either way, `.open()`/`.close()` is then called on it from the trigger/close buttons' click handlers. Angular keeps a template reference (`#popup`) resolved via `@ViewChild('popup') popup!: MbscPopup`, with component methods calling `this.popup.open()`/`this.popup.close()`.
- React and Vue instead bind the popup's visibility declaratively: a boolean state (`isPopupOpen`) is passed as the `isOpen`/`:isOpen` prop, the trigger button's click handler sets it to `true`, and both the popup's `onClose`/`@close` callback and the in-popup Close button's click handler set it back to `false` - there is no direct `.open()`/`.close()` call in these two frameworks for this pattern.
- Content placed inside the popup (image, heading, paragraph, Close button) is rendered as children of `<Popup>`/`<MbscPopup>`/`<mbsc-popup>` in React/Vue/Angular, or as the markup inside the target container element (`<div id="demo-popup">`) that `.popup()` is initialized on in JS/jQuery.

## 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

- Next: [Understanding display modes](https://demo.mobiscroll.com/react/popup/mobile-desktop-display.md) - React popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning.