微信小程序自定义模态框，官方版本与自定义可扩展版本

微信小程序自定义模态框，官方版本与自定义可扩展版本

提示：文章最后有源码，可自取
文章主要通过模仿官方的模态框进行自定义模态框的设计，我将会先讲述原理，然后给出源码，最后指出一些需要注意的地方

---

提示：文章是自己开发过程中根据自己的理解所写，可能有错误的地方，欢迎指出

---

前言

在进行微信小程序开发的时候，我们经常会使用模态框，而官方自带的模态框对于有些场景来说，由于其限制导致满足不了需求，这时候就需要我们自定义模态框。

---

一、实现思路

模态框是通过点击后显示的让用户进行操作的组件，它主要实现的功能有：

• 点击后显示模态框主题，背景黑色半透明，同时固定
• 点击模态框操作后做出相应的操作
• 点击半透明区域后隐藏

核心代码思路：
wxml：使用wx:if="{ {remark_show}}"判断是否显示模态框，同时根据事件冒泡来获取点击事件来源，也可以写多几个函数，不过写在一个函数里面更像一个主体
wxss：通过固定定位position: fixed;以及background-color: rgb(0,0,0,0.5);实现半透明，注意这里不能使用opacity，不然文字也会半透明
js：这里并没有太多特殊的地方，是比较基本的写法，有需要注意的地方已经注释了

二、相关代码

1.index.wxml

<button class="btn_test" type="primary" bindtap="showModel2">官方弹框接口</button>
<button class="btn_test" type="primary" bindtap="showModel">自定义弹框</button>

<block wx:if="{
    {remark_show}}">
  <view class="mo_cont" bindtap="{
    {modelOprate}}" data-type="modelOut">
    <view class="mo_body">
      <view class