一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

前言

微信小程序目前官方文档中也有自己的弹窗组件，但是受限太多，比如加上图片之后不好调整不好加上一些好看的效果，有点太古板，然而两个按钮操作不能修改一下自定义样式，为此我们需要单独开发一个独立组件进行适配，方便快捷。话不多说，上图！

模块编辑

背景图层

1.外部背景框

众所周知打开弹窗后背景图市浅灰色带点透明色，而且点击后需要把弹窗关闭。modalName为是否开启和关闭的控制变量

//这是第一层也是带有浅灰色背景的大框框
<view class="modal {{modalName ?'show':''}}"></view>

2.内部小框

内部小框指的是把咱们的显示内容居中展示，颜色一般为白色（感觉这样才能和浅灰色背景形成对比）

<view class="dialog"></view>

3.提示标题和关闭按钮

提示标题个人觉得还是不要写死，这样不方便后续维护，关闭按钮是通过::before插入的icon,这个东西写死就可以。（我这里把提示和关闭按钮写在一行了，通过设置flex）

<view class="bar white justify-end">
  <view class="content">提示</view>
  <view class="action" bindtap="hideModal">
    <text class="close text-red"></text>
  </view>
</view>

4.内容位置

内容位置在提示标题和关闭按钮的地下排列，这个可以根据自己的需求一直往下拓展。这个里边可以自己自行发挥。

<view class="padding">
  <view class="app_con">
    <image src="xxx" style="width:80%"></image>
    <view>我是提示内容</view>
  </view>
</view>

5.按钮

布局放在最底下，一般情况下是两个，也有三个以上的，这个可以自行整理，按钮样式和按钮内容多样化编辑。

<view class="cu-bar bg-white">
  <view class="action margin-0 flex-sub  solid-left">我是一个按钮</view>
    <view class="action margin-0 flex-sub  solid-left">我是二个按钮</view>
</view>

样式

外部样式颜色rgba(0, 0, 0, 0.6)这个感觉非常的舒服，首先咱们需要把最外的大框打上定位一直悬浮在最上层position: fixed;显示动画transition：all 0.3s ease-in-out 0s，这个是打开后会放大0.3s最后缩小。

position: fixed;
top: 0;
right: 0;
z-index: 1110;
opacity: 0;
text-align: center;
transform: scale(1.185);
background: rgba(0, 0, 0, 0.6);
transition: all 0.3s ease-in-out 0s;

开启后会加上show的class,这个是打开后增加的一些样式，这样做的目的是方便了之前样式预加载，点击开启后咱们只需要在加载一小部分，速度是进一步的提升，没有打开之前 opacity为0，打开后加上overflow-y: auto;只能想Y轴滑动

opacity: 1;
transition-duration: 0.3s;
-ms-transform: scale(1);
transform: scale(1);
overflow-x: hidden;
overflow-y: auto;
pointer-events: auto;

最后

文字和按钮的样式，大家可以自由的发挥，大的框架已经搭好，里边的内容就请大家发挥。

微信小程序之有动画加载的自定义弹窗

前言