Understanding display modes
The popup has four built-in display modes that can be controlled through the display option:
top- popup that slides down from the topbottom- popup that slides up from the bottomcenter- popup that shows up in the middle with a pop animationanchored- 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 →
Demo
<mbsc-popup
display="anchored"
[ touchUi] ="<mbsc-popup
display="top"
[ touchUi] ="<mbsc-popup
display="center"
[ touchUi] ="<mbsc-popup
display="bottom"
[ touchUi] ="
ComponentTemplateCSS
import { CommonModule } from '@angular/common';
import { Component, ViewChild } from '@angular/core';
import { MbscModule, MbscPopup, MbscPopupOptions, setOptions } from '@mobiscroll/angular';
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
@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();
}
}
<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>
/* style */