Mobile Platform as a Service:Popup

Attribute

Attribute	Type	Required	Default	Description
visible	boolean	No	false	Whether to display the component.
maskClosable	boolean	No	false	Whether tapping the mask layer closes the popup.
showCloseIcon	boolean	No	false	Whether to display the close icon.
disableScroll	boolean	No	true	Whether to disable page scrolling when the popup is visible.
animation	boolean	No	true	Whether to enable transition animation.
duration	number	No	300	Animation duration, in milliseconds.
position	'center' | 'top' | 'bottom' | 'left' | 'right'	No	'center'	The position of the popup.
zIndex	number	No	998	The z-index (stacking order) of the popup.
className	string	No	-	Custom class name.

Event

Event name	Description	Type
onClose	Callback fired when the popup is closed.	( visible: boolean ) => void

Style class

Class name	Description
amd-popup	Overall component style.
amd-popup-mask	Mask layer style.
amd-popup-disable-scroll	Style when scrolling is disabled.
amd-popup-animation	Style when animation is enabled.
amd-popup-content	Content area style.
amd-popup-top	Style for the top-positioned popup.
amd-popup-bottom	Style for the bottom-positioned popup.
amd-popup-left	Style for the left-positioned popup.
amd-popup-right	Style for the right-positioned popup.
amd-popup-center	Style for the center-positioned popup.
amd-popup-close-container	Close icon container style.
amd-popup-close-container	Close icon style.

Code sample

Basic usage

Sample 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>

Sample 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 });
  },
});

Sample 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;
}

Sample 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"
  }
}