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
<MbscPopup
display="anchored"
:touchUi="<MbscPopup
display="top"
:touchUi="<MbscPopup
display="center"
:touchUi="<MbscPopup
display="bottom"
:touchUi="
SFC JSSFC TS
<script setup>
import { MbscButton, MbscPage, MbscPopup, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const buttonRef = ref(null)
const isAnchoredOpen = ref(false)
const isTopOpen = ref(false)
const isCenterOpen = ref(false)
const isBottomOpen = ref(false)
const myAnchor = ref()
function openAnchored() {
myAnchor.value = buttonRef.value.instance.nativeElement
isAnchoredOpen.value = true
}
</script>
<template>
<MbscPage>
<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">
<MbscButton ref="buttonRef" @click="openAnchored">Try anhored display mode</MbscButton>
<MbscButton @click="isTopOpen = true">Try top display mode</MbscButton>
<MbscButton @click="isCenterOpen = true">Try center display mode</MbscButton>
<MbscButton @click="isBottomOpen = true">Try bottom display mode</MbscButton>
</div>
</div>
<MbscPopup
display="anchored"
:anchor="myAnchor"
:isOpen="isAnchoredOpen"
@close="isAnchoredOpen = false"
>
<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>
</MbscPopup>
<MbscPopup display="top" :isOpen="isTopOpen" @close="isTopOpen = false">
<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>
</MbscPopup>
<MbscPopup display="center" :isOpen="isCenterOpen" @close="isCenterOpen = false">
<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>
</MbscPopup>
<MbscPopup display="bottom" :isOpen="isBottomOpen" @close="isBottomOpen = false">
<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>
</MbscPopup>
</MbscPage>
</template>
<style>
/* style */
</style><script setup lang="ts">
import { MbscButton, MbscPage, MbscPopup, setOptions } from '@mobiscroll/vue'
import { ref } from 'vue'
setOptions({
locale: ,
theme: ' ',
themeVariant: ' '
})
const isAnchoredOpen = ref(false)
const isCenterOpen = ref(false)
const isBottomOpen = ref(false)
const isTopOpen = ref(false)
const buttonRef = ref<any>(null)
const myAnchor = ref<any>(null)
function openAnchored() {
myAnchor.value = buttonRef.value.instance.nativeElement
isAnchoredOpen.value = true
}
</script>
<template>
<MbscPage>
<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">
<MbscButton ref="buttonRef" @click="openAnchored">Try anhored display mode</MbscButton>
<MbscButton @click="isTopOpen = true">Try top display mode</MbscButton>
<MbscButton @click="isCenterOpen = true">Try center display mode</MbscButton>
<MbscButton @click="isBottomOpen = true">Try bottom display mode</MbscButton>
</div>
</div>
<MbscPopup
display="anchored"
:anchor="myAnchor"
:isOpen="isAnchoredOpen"
@close="isAnchoredOpen = false"
>
<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>
</MbscPopup>
<MbscPopup display="top" :isOpen="isTopOpen" @close="isTopOpen = false">
<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>
</MbscPopup>
<MbscPopup display="center" :isOpen="isCenterOpen" @close="isCenterOpen = false">
<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>
</MbscPopup>
<MbscPopup display="bottom" :isOpen="isBottomOpen" @close="isBottomOpen = false">
<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>
</MbscPopup>
</MbscPage>
</template>
<style>
/* style */
</style>