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

# Understanding display modes - Angular Popup demo

Angular popup, modal for mobile/desktop with top, bottom, popup, center, modal, anchored positioning.

- [Live demo](https://demo.mobiscroll.com/angular/popup/mobile-desktop-display)
- [View code on GitHub](https://github.com/acidb/mobiscroll-demos-angular/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), [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/angular/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/angular/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

```html
<mbsc-popup
  display="anchored"
  [touchUi]="true">
</mbsc-popup>
```

```html
<mbsc-popup
  display="top"
  [touchUi]="true">
</mbsc-popup>
```

```html
<mbsc-popup
  display="center"
  [touchUi]="true">
</mbsc-popup>
```

```html
<mbsc-popup
  display="bottom"
  [touchUi]="true">
</mbsc-popup>
```

## API used in this demo

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

## Code

### Component

```ts
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { MbscModule, MbscPopup, MbscPopupOptions, setOptions } from '@mobiscroll/angular';

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

@Component({
  selector: 'app-root', 
  templateUrl: './app.component.html',
  standalone: true,
  imports: [CommonModule, MbscModule],
})
export class AppComponent {
  @ViewChild('popupAnchored', { static: false }) popupAnchored!: MbscPopup;
  @ViewChild('popupTop', { static: false }) popupTop!: MbscPopup;
  @ViewChild('popupCenter', { static: false }) popupCenter!: MbscPopup;
  @ViewChild('popupBottom', { static: false }) popupBottom!: MbscPopup;

  popupAnchor: HTMLElement | undefined;

  anchoredOptions: MbscPopupOptions = {
    display: 'anchored',
  };
  topOptions: MbscPopupOptions = {
    display: 'top',
  };
  centerOptions: MbscPopupOptions = {
    display: 'center',
  };
  bottomOptions: MbscPopupOptions = {
    display: 'bottom',
  };

  openAnchored(ev: any): void {
    this.popupAnchor = ev.currentTarget;
    this.popupAnchored.open();
  }

  openTop(): void {
    this.popupTop.open();
  }

  openCenter(): void {
    this.popupCenter.open();
  }

  openBottom(): void {
    this.popupBottom.open();
  }
}
```

### Template

```html
<mbsc-page>
  <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">
      <mbsc-button (click)="openAnchored($event)">Try anhored display mode</mbsc-button>
      <mbsc-button (click)="openTop()">Try top display mode</mbsc-button>
      <mbsc-button (click)="openCenter()">Try center display mode</mbsc-button>
      <mbsc-button (click)="openBottom()">Try bottom display mode</mbsc-button>
    </div>
  </div>

  <mbsc-popup #popupAnchored [anchor]="popupAnchor" [options]="anchoredOptions">
    <div class="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>
  </mbsc-popup>

  <mbsc-popup #popupTop [options]="topOptions">
    <div class="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>
  </mbsc-popup>

  <mbsc-popup #popupCenter [options]="centerOptions">
    <div class="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>
  </mbsc-popup>

  <mbsc-popup #popupBottom [options]="bottomOptions">
    <div class="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>
  </mbsc-popup>
</mbsc-page>
```

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

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

   ```
   npm install
   ```

6. Run the project:

   ```
   ng serve
   ```

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

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

## Related demos

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