All Products
Search
Document Center

Modal

Last Updated: Feb 04, 2021

This section describes the modal dialog box.

Property Description Type Default value
className Custom class. String -
show Whether to display modal Boolean false
showClose Whether to render close Boolean true
closeType Type of the icon for closure. The value can be 0 - gray icon or 1 - white icon. String 0
onModalClick Callback when you tap the footer part. () => void -
onModalClose Callback when you tap close. The value does not need to be specified when showClose is false. () => void -
topImage Top image. String -
topImageSize Rule of the top image, which can be lg, md, sm String md
advice Whether it is an operation pop-up window. Boolean false

slots

slotName Description
header Modal head, which is optional.
footer Modal tail, which is optional.

Sample code

 
  1. {
  2. "defaultTitle": "AntUI component library of the Mini Program",
  3. "usingComponents": {
  4. "modal": "mini-antui/es/modal/index"
  5. }
  6. }
 
  1. <view>
  2. <button onTap="openModal">Enables modal.</button>
  3. <modal
  4. show="{{modalOpened}}"
  5. onModalClick="onModalClick"
  6. onModalClose="onModalClose"
  7. topImage="https://gw.alipayobjects.com/zos/rmsportal/yFeFExbGpDxvDYnKHcrs.png"
  8. >
  9. <view slot="header">Single line title.</view>
  10. Explains the current status and provides solutions, preferably no more than two lines.
  11. <view slot="footer">OK</view>
  12. </modal>
  13. </view>
 
  1. Page({
  2. data: {
  3. modalOpened: false,
  4. },
  5. openModal() {
  6. this.setData({
  7. modalOpened: true,
  8. });
  9. },
  10. onModalClick() {
  11. this.setData({
  12. modalOpened: false,
  13. });
  14. },
  15. onModalClose() {
  16. this.setData({
  17. modalOpened: false,
  18. });
  19. }
  20. });