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
{
display: 'anchored',
touchUi: {
display: 'top',
touchUi: {
display: 'center',
touchUi: {
display: 'bottom',
touchUi: 
JSHTMLCSS
mobiscroll.setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
});
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();
});
<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>
/* style */