小程序弹窗

￡神魔★判官ぃ 2022-03-18 03:50 360阅读 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 条评论，360人围观）

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

相关阅读

相关样式集（八）弹窗，规则弹窗，半透明弹窗

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

待我称王封你为后i/ 2022年11月05日 05:27/ 0 赞/ 289 阅读

相关微信小程序常用弹窗

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

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

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

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

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

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

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

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

相关微信小程序实现弹窗预览图片

今天要实现,点击实现预览图片的功能,看了网上的解决方案,都不太满意,于是自己写了一个.用到了zan-ui的弹窗样式,要引入zan-ui的框架,不会的话,可以看这篇文章 [微信

梦里梦外;/ 2022年05月28日 10:59/ 0 赞/ 732 阅读

相关微信小程序-用component自定义toast弹窗

前言微信小程序自带的消息提示框有`字数限制`，而且图标仅仅只有`"success"`，`"loading"`，`"none"`。当我们在实际开发过程中，面对UI给的设计

梦里梦外;/ 2022年05月21日 13:17/ 0 赞/ 521 阅读

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

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

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

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

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

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

相关小程序弹窗

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

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

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

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

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