A Popup component is a custom content area floated or displayed on the screen. It is used to display popup content or prompt messages and allow you to select, enter, or switch content. You can use multiple popups on the same page for overlay display. The onClose function is not triggered when maskClosable is set to false.
Attribute
Attribute | Type | Required | Default | Description |
visible | boolean | No | false | Whether to display the component. |
maskClosable | boolean | No | false | Whether the mask layer can be closed upon taps. |
showCloseIcon | boolean | No | false | Whether to display the close icon. |
disableScroll | boolean | No | true | Whether to disable scrolling of the page when a popup is displayed. |
animation | boolean | No | true | Whether to enable the animation for transition. |
duration | number | No | 300 | The animation duration in milliseconds. |
position | 'center' | 'top' | 'bottom' | 'left' | 'right' | No | 'center' | The layout of the popup. |
zIndex | number | No | 998 | The layer level of the popup. |
className | string | No | - | The class name. |
Event
Event name | Description | Type |
onClose | Callback fired when the popup is closed. |
|
Style class
Class name | Description |
amd-popup | The style of the entire component. |
amd-popup-mask | The style of the popup mask layer. |
amd-popup-disable-scroll | The style of the popup with scrolling disabled. |
amd-popup-animation | The style of the popup with the animation turned on. |
amd-popup-content | The content style. |
amd-popup-top | The style of the popup on the top. |
amd-popup-bottom | The style of the popup on the bottom. |
amd-popup-left | The style of the popup on the left. |
amd-popup-right | The style of the popup on the right. |
amd-popup-center | The style of the popup on the center. |
amd-popup-close-container | The style of the area around the close icon. |
amd-popup-close-container | The style of the close icon. |
Code sample
Basic usage
The following shows an example of the code in the index.axml file:
<view>
<popup visible="{{basicShow}}" maskClosable="{{maskClosable}}" position="{{position}}" animation="{{animation}}" onClose="handlePopupClose"
showCloseIcon="{{showCloseIcon}}">
</popup>
<popup visible="{{showCenterDisableScoll}}" maskClosable="{{maskClosable}}" position="center" animation="{{animation}}"
onClose="handlePopupClose" showCloseIcon="{{showCloseIcon}}">
<scroll-view scroll-y="{{true}}" class="box center" disable-lower-scroll="out-of-bounds" disable-upper-scroll="out-of-bounds">
<view class="centerContent"> try to scroll</view>
</scroll-view>
</popup>
<popup visible="{{showCenterScoll}}" maskClosable="{{maskClosable}}" position="center" animation="{{animation}}" onClose="handlePopupClose"
showCloseIcon="{{showCloseIcon}}" disableScroll="{{false}}">
<scroll-view scroll-y="{{true}}" class="box center">
<view class="centerContent"> try to scroll</view>
</scroll-view>
</popup>
<demo-block title="Popup position">
<view class="btn-list">
<button data-position="top" onTap="handleShowBasic">Top popup</button>
<button data-position="bottom" onTap="handleShowBasic">Bottom popup</button>
<button data-position="left" onTap="handleShowBasic">Left popup</button>
<button data-position="right" onTap="handleShowBasic">Right popup</button>
<button data-position="center" onTap="handleShowBasic">Middle popup</button>
</view>
</demo-block>
<list>
<list-item>
Display close button
<switch slot="extra" checked="{{showCloseIcon}}" controlled onChange="handleChangeShowCloseIcon" />
</list-item>
<list-item>
Clickable mask to close
<switch slot="extra" checked="{{maskClosable}}" controlled onChange="handleChangeMaskClosable" />
</list-item>
<list-item>
Turn on transition animation
<switch slot="extra" checked="{{animation}}" controlled onChange="handleChangeAnimation" />
</list-item>
</list>
<demo-block title=" Set disableScroll">
<view class="btn-list">
<button onTap="handleShowDisableScroll">Popup inner scrolling - disable page scrolling</button>
<button onTap="handleShowScroll">Popup internal scrolling - enable page scrolling</button>
</view>
</demo-block>
</view>The following shows an example of the code in the index.js file:
Page({
data: {
position: '',
basicShow: false,
maskClosable: true,
showCloseIcon: true,
animation: true,
showCenterScoll: false,
showCenterDisableScoll: false,
},
handlePopupClose() {
this.setData({
basicShow: false,
showCenterScoll: false,
showCenterDisableScoll: false,
});
},
handleShowBasic(e) {
const { position } = e.target.dataset;
this.setData({
position,
basicShow: true,
});
},
handleShowDisableScroll() {
this.setData({
showCenterDisableScoll: true,
});
},
handleShowScroll() {
this.setData({
showCenterScoll: true,
});
},
handleChangeMaskClosable(checked) {
const { showCloseIcon } = this.data;
if (!showCloseIcon && !checked) {
return my.alert({
content: 'Hiding the close button and the mask close event at the same time will not close the popup layer',
});
}
this.setData({ maskClosable: checked });
},
handleChangeShowCloseIcon(checked) {
const { maskClosable } = this.data;
if (!maskClosable && !checked) {
return my.alert({
content: 'Hiding the close button and the mask close event at the same time will not close the popup layer',
});
}
this.setData({ showCloseIcon: checked });
},
handleChangeAnimation(checked) {
this.setData({ animation: checked });
},
});The following shows an example of the code in the index.acss file:
.box {
display: flex;
justify-content: center;
align-items: center;
}
.box.center {
display: block;
height: 200px;
}
.centerContent {
width: 60%;
height: 500px;
margin: 24rpx auto;
padding: 24rpx;
background-color: #ccc;
box-sizing: border-box;
}The following shows an example of the code in the index.json file:
{
"defaultTitle": "Popup",
"usingComponents": {
"popup": "antd-mini/es/Popup/index",
"demo-block": "../../components/DemoBlock/index",
"button": "antd-mini/es/Button/index",
"list": "antd-mini/es/List/index",
"list-item": "antd-mini/es/List/ListItem/index",
"switch": "antd-mini/es/Switch/index"
}
}