All Products
Search
Document Center

Popup

Last Updated: Feb 04, 2021

This section describes the pop-up window.

Property Description Type Default value Mandatory
className Custom class. String - false
show Whether to display the menu. Boolean false false
animation Whether to enable the animation. Boolean true false
mask Whether to display the mask. If no, tapping the external area will not trigger the onClose event. Boolean true true
position Pop-up direction of the pop-up window. The vale can be bottom, left, top, or right. String bottom false
disableScroll Whether to disable page scroll when the mask is displayed. Boolean true false
zIndex Level of the pop-up window. Number 0 false

slots

You can define the part to be displayed in the popup component. For details, see the following example.

Sample code

 
  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "popup": "mini-antui/es/popup/index"
  5. }
  6. }
 
  1. <view>
  2. <view class="btn-container">
  3. <button onTap="onTopBtnTap">Pops up a window</button>
  4. </view>
  5. <popup show="{{showTop}}" position="top" onClose="onPopupClose">
  6. <view style="height: 200px; background: #fff; display: flex; justify-content: center; align-items: center;">hello world</view>
  7. </popup>
  8. </view>
 
  1. Page({
  2. data: {
  3. showTop: false,
  4. },
  5. onTopBtnTap() {
  6. this.setData({
  7. showTop: true,
  8. });
  9. },
  10. onPopupClose() {
  11. this.setData({
  12. showTop: false,
  13. });
  14. },
  15. });