实现自定义弹窗（网页+小程序）

这是应用开发过程中，会经常用到的一种效果，ApiCloud的话可以用dialogBox模块来实现，但是里面的效果也就固定的那几种，万一都不符合需求的样式呢？这就需要通过另一种方式来达到这种弹窗的效果，就是利用openFrame来实现，这样的话，里面的布局样式想怎么搞就怎么搞，搞出花儿来都行！！具体代码如下，里面有详细注释，不过多解释。先看一下效果图（样式很丑！低调低调~~~，主要就是看功能的实现）：

api.openFrame({
            name: 'dialog_frame',
            url: './dialog_frame.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            pageParam: {
                name: 'test'
            },
            bgColor: 'rgba(0,0,0,0.4)',//设置一下透明度
            vScrollBarEnabled: false,
            hScrollBarEnabled: true
        });

然后弹窗的body整体透明，样式：

<style>
        html,
        body {
            height: 100%;
            background: transparent
        }

        .container {
            display: -webkit-flex;
            display: flex;
            width: 100%;
            height: 100%;
            justify-content: center;
            align-items: center;
        }

        .content {
            width: 80%;
            height: 100px;
            background: #fff;
            border-radius: 5px;
        }
    </style>

<body>
    <div class="container">
        <div class="content">
            <div class="d_title">温馨提示</div>
            <div class="d_content">弹窗的内容</div>
            <div style="height:1px;background:#000"></div>
            <div class="d_confirm" onclick="api.closeFrame()" tapmode>确定</div>
        </div>
    </div>
</body>

//实现点击弹窗外围也让弹窗消失（用到的jquery，自行引入）
    function initEventListener() {
        $(document.body).on('touchend', function(e) {
            var dialog = $(".container")[0];
            if (!$.contains(dialog, e.target)) {
                setTimeout(function() {
                    api.closeFrame();
                }, 50);
            }
        });
    }

下面看一下小程序的效果图，这是我一个项目中的效果

这种弹窗，用wx.showModal这种模态框肯定是实现不了的，弹窗的布局可能千变万化，所以只能自定义,下面看代码。

布局：其实弹窗布局也是在这个拍照页面布局里，只不过是一开始隐藏了而已，必要的时候再显示。


<view class='dialog_container' hidden='{{flag}}' catchtouchmove='true'>
   <view>
      <view class='dialog_title'>交管小贴士</view>
      <view class='content1'>请在拍照前开启危险报警闪光灯，设置三角警示牌，拍照时注意交通安全。</view>
      <view class='content2'>点击图例相机可以进行现场拍照，也可以从手机相机中提取已拍摄的现场照片，图片至少3张，最多6张。</view>
      <view class='btn_confirm' bindtap='dialog_confirm'>确定</view>
   </view>
</view>

hidden：就是事先用来控制显示隐藏的

catchtouchmove='true' 当弹窗出现时，禁止浮层下页面的滑动，不设置的话，页面依然可以滚动

下面看样式：

.dialog_container {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0px;
  bottom: 0px;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  background: rgba(0, 0, 0, 0.2);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dialog_title {
  height: 40px;
  background: #2c66a8;
  line-height: 40px;
  text-align: center;
  color: white;
  font-size: 18px;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.content1 {
  background: #fff;
  color: red;
  padding: 4px;
}

.content2 {
  background: #fff;
  color: #000;
  padding: 4px;
}

.btn_confirm {
  height: 40px;
  line-height: 40px;
  background: #f4f4f4;
  color: #2c66a8;
  text-align: center;
  font-size: 16px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}

搞定！顺便说一下，如果你的弹窗里有textarea这种文本输入框，需要给textarea再单独加一个fixed='true'的属性，不然滑动textarea区域，依然会滚动起整个页面。我也是查了微信小程序的api之后才知道的，当时就掉整个坑里了。就是因为弹窗的外层布局设置了position:fixed属性。ok，采坑完毕。

实现自定义弹窗（网页+小程序）

猜你喜欢