小程序弹窗

￡神魔★判官ぃ 2022-03-18 03:50 287阅读 0赞

test.js

data: {
        modalHidden: true,
        },
      /**
         * 显示弹窗
         */
      buttonTap: function () {
        this.setData({
          modalHidden: false
        })
      },
      /**
       * 点击取消
       */
      modalCandel: function () {
        // do something
        this.setData({
          modalHidden: true
        })
      },

test.wxml

//点击显示弹窗
      <view class="nav_link nav_link1" bindtap='buttonTap'>
        <button class="defalut_btn" bindtap='gotoMessages'>
        <text class="txt">租书</text>
        </button>
      </view>
      //点击关闭弹窗
      <view class='tright-top' bindtap='modalCandel'>
            <image src='../images/guanbi.png'></image>
       </view>
     //弹窗开始
    <view class='newpopup' hidden="{
       {modalHidden}}">
    
    <view class=' popup' >
    //在里面写弹窗内容
    </view>
    </view>
    //弹窗结束

test.wxss

.newpopup {
      position: fixed;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      background: rgba(0, 0, 0, 0.6);
      z-index: 10;
    }
    
    .popup {
      padding: 0 30rpx 100rpx 30rpx;
      border-radius: 20rpx;
      background: #fff;
      position: absolute;
      top: 47%;
      left: 20%;
      margin-left: -150rpx;
      margin-top: -240rpx;
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关微信小程序四种弹窗方式

微信小程序弹窗一、wx.showToast(Object object) 二、wx.showModal(Object object) 三、wx.sh

忘是亡心i/ 2024年04月07日 11:19/ 0 赞/ 10 阅读

相关微信小程序隐私协议弹窗

组件：privacy-popup <template> <view v-if="showPrivacy" :class="privacyClass">

桃扇骨/ 2024年03月26日 22:24/ 0 赞/ 8 阅读

相关 C# 服务程序弹窗

C\ 服务程序弹窗 1.创建C\服务程序 2.初始代码 3.添加安装程序 4.设置属性 5.服务的发

柔情只为你懂/ 2023年10月18日 16:51/ 0 赞/ 51 阅读

相关微信小程序常用弹窗

[官方文档][Link 1] wx.showToast wx.showToast({ title: '加载', icon

小灰灰/ 2022年10月31日 12:23/ 0 赞/ 180 阅读

相关小程序弹窗后跳转页面

wx.showToast({ title: '评价成功！', duration: 800, success:

我不是女神ヾ/ 2022年10月09日 00:44/ 0 赞/ 125 阅读

相关微信小程序带图片弹窗简单实现

怎样实现一个带图片显示的模态视图弹窗呢？有时候我们的确有这个需求，自己实现？不不不，哪有官方的方便！使用官方组件实现图片模态弹窗下面我来介绍一种使用官方组件就能实现的方

骑猪看日落/ 2022年08月30日 11:38/ 0 赞/ 307 阅读

相关 5.微信小程序之弹窗

点击按钮，弹出弹窗。内含三个选项，选中其中某项，点击确认后显示文字 1.![70][] 2.![70 1][] 3.![70 2][] 具体代码 1.popup.wx

深碍√TFBOYSˉ_/ 2022年05月08日 05:56/ 0 赞/ 734 阅读

相关小程序自定义弹窗（有显示动画的）

小程序类似与Vue.js，Angular.js这样的模板引擎，这类MVVM的数据驱动框架能快速的开发项目，但是在做小程序时必会遇到的一个问题就是弹窗非常生硬，没有过渡动画。下面

Myth丶恋晨/ 2022年05月04日 04:00/ 0 赞/ 250 阅读

相关小程序弹窗

test.js data: { modalHidden: true, }, / 显示弹窗

￡神魔★判官ぃ/ 2022年03月18日 03:50/ 0 赞/ 288 阅读

相关微信小程序-表单弹窗示例

[https://blog.csdn.net/w10322331/article/details/80348848][https_blog.csdn.net_w10322331

柔光的暖阳◎/ 2021年12月12日 13:59/ 0 赞/ 561 阅读