Popup

Parameters

Parameter	Description	Type	Optional Values	Default Value
mask	Whether to show mask layer	Boolean	--	true
show	Whether to display	Boolean	false	default
position	Position	String	--	false
slide	Whether to enable sliding	Boolean	--	false
reference	Reference element	--	--	--
contentHeight	Content height	Number	--	-
contentWidth	Content width	Number	--	-
isOptimize	Optimization flag	--	--	--
styleZindex	Z-index	Number	--	10000

Example

<view>
    <fs-page title="popup" bindonMounted="onMounted">
        <view class="page">
            <fs-scroll height="{{dScrollHeight}}" class="scroll">
                <fs-divider tip="Static popup"></fs-divider>
                <fs-button text="default" bindtap="onPopup" data-type="1" class="button"></fs-button>
                <fs-button text="left" bindtap="onPopup" data-type="2" class="button"></fs-button>
                <fs-button text="right" bindtap="onPopup" data-type="3" class="button"></fs-button>
                <fs-button text="top" bindtap="onPopup" data-type="4" class="button"></fs-button>
                <fs-button text="bottom" bindtap="onPopup" data-type="5" class="button"></fs-button>

                <fs-divider tip="Dynamic popup"></fs-divider>
                <fs-button text="default" bindtap="onPopup" data-type="6" class="button"></fs-button>
                <fs-button text="left" bindtap="onPopup" data-type="7" class="button"></fs-button>
                <fs-button text="right" bindtap="onPopup" data-type="8" class="button"></fs-button>
                <fs-button text="top" bindtap="onPopup" data-type="9" class="button"></fs-button>
                <fs-button text="bottom" bindtap="onPopup" data-type="10" class="button"></fs-button>

                <fs-divider tip="Popup without mask"></fs-divider>
                <fs-button text="default" bindtap="onPopup" data-type="11" class="button"></fs-button>

                <fs-divider tip="Position near target element"></fs-divider>
                <view id="target" class="target"></view>
                <fs-button text="Appear above" bindtap="onPopup" data-type="12" class="button"></fs-button>
                <fs-button text="Appear below" bindtap="onPopup" data-type="13" class="button"></fs-button>
                <fs-button text="Appear left" bindtap="onPopup" data-type="14" class="button"></fs-button>
                <fs-button text="Appear right" bindtap="onPopup" data-type="15" class="button"></fs-button>

                <view style="height:250rpx;"></view>
            </fs-scroll>
        </view>
        <fs-popup show="{{show}}" bindonMaskClose="onClose" bindonBackClose="onClose" position="{{position}}" slide="{{slide}}" mask="{{mask}}"
            reference="{{reference}}" contentHeight="{{400}}" contentWidth="{{400}}" isOptimize="{{isOptimize}}">
            <text slot="content" class="content" bindtap="tapHandler">Test {{position}}</text>
        </fs-popup>
    </fs-page>
</view>

// pages/testPopup/testPopup.js
const paramConfig = {
  1: {
    position: "center"
  },
  2: {
    position: "left"
  },
  3: {
    position: "right"
  },
  4: {
    position: "top"
  },
  5: {
    position: "bottom"
  },
  6: {
    position: "center",
    slide: true
  },
  7: {
    position: "left",
    slide: true
  },
  8: {
    position: "right",
    slide: true
  },
  9: {
    position: "top",
    slide: true
  },
  10: {
    position: "bottom",
    slide: true
  },
  11: {
    slide: true,
    mask: false
  },
  12: {
    position: "top",
  },
  13: {
    position: "bottom",
  },
  14: {
    position: "left"
  },
  15: {
    position: "right"
  }
}

Page({

  /**
   * Page initial data
   */
  data: {
    show: false,
    position: "",
    slide: false,
    mask: true,
    dScrollHeight: 2000,
    reference: null,
    isOptimize: false
  },

  onPopup(event) {
    const type = event.target.dataset.type;
    let param = {
      position: "center",
      slide: false,
      mask: true,
      isOptimize: false,
      reference: type > 11 && type < 16 ? { id: "target", getContext: () => this } : null
    }

    param = Object.assign(param, paramConfig[type] || {});
    this.setData({
      position: param.position,
      slide: param.slide,
      mask: param.mask,
      isOptimize: param.isOptimize,
      reference: param.reference,
      show: true
    });
  },
  onMounted(e) {
    this.setData({
      dScrollHeight: e.detail.mainHeight
    });
  },
  onClose() {
    this.setData({
      show: false
    });
  },
  tapHandler() {
    cml.alert({
      message: "Test"
    });
  }
})