微信小程序各种方向进行弹窗

微信小程序中点击按钮后从不同方向进行弹窗：

有上下左右中五个方向

界面演示图如图所示：

代码如下：

1.wxml:

<button type="primary" bindtap="openPopup" data-index="0">打开顶部弹窗</button>
<button type="primary" bindtap="openPopup" data-index="1">打开中间弹窗</button>
<button type="primary" bindtap="openPopup" data-index="2">打开底部弹窗</button>
<button type="primary" bindtap="openPopup" data-index="3">打开左边弹窗</button>
<button type="primary" bindtap="openPopup" data-index="4">打开右边弹窗</button>
<!-- 顶部弹窗 -->
<view class="popup-box" wx:if="{
  {showIndex=='0'}}" bindtap="closePopup"></view> 
<view class="info-top" wx:if="{
  {showIndex=='0'}}">
  <view class="row-info">
    <view>
      <text class="line left-line"></text>
      <text>《登高》</text>
      <text class="line right-line"></text>
    </view>
    <view class="row-author">杜甫 〔唐代〕</view>
    <view>风急天高猿啸哀，渚清沙白鸟飞回。</view>
    <view>无边落木萧萧下，不尽长江滚滚来。</view>
    <view>万里悲秋常作客，百年多病独登台。</view>
    <view>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</view>
  </view>
  <view class="row-btn">
    <view class="left-btn" bindtap="closePopup">取消</view>
    <view class=