Used to display positionable and scrollable popup content.

Parameters

Parameter	Description	Type	Optional Values	Default
mask	Whether there is a mask layer	Boolean	--	true
show	Whether to show	Boolean	false	default
position	Position	String	--	false
slide	Whether it slides	boolean	--	false
reference	Element content that triggers Popover display	--	--
contentHeight	Content height	Number	--	--
contentWidth	Content width	Number	--	--
isOptimize	--	--	--
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({
  /**
   * Initial page 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"
    });
  }
})