小程序实现弹出遮罩层模态框

<view bindtap=‘showRule‘>点击弹出模态框</view>

<!--遮罩层-->
<view class="ruleZhezhao {{isRuleTrue?‘isRuleShow‘:‘isRuleHide‘}}">
    <view class=‘ruleZhezhaoContent‘>
      <image src=‘/images/zijia.png‘ class="select"></image>
      <image src=‘/images/kaiche.png‘ class="select"></image>
      <image src=‘/images/daijia.png‘ class="select"></image>
      <image src=‘/images/vip.png‘ class="select"></image>
      <image src=‘/images/cha.png‘ class=‘ruleHide‘ bindtap=‘hideRule‘></image>
    </view>
  </view>
data:{
showView: true
}
 //打开规则提示
  showRule: function () {
    this.setData({
      isRuleTrue: true
    })
  },
  //关闭规则提示
  hideRule: function () {
    this.setData({
      isRuleTrue: false
    })
  },
.isRuleShow{
  display: block;
}
.isRuleHide{
  display: none;
}
.ruleZhezhao{
  height: 100%;
  width: 100%;
  position: fixed;
  background-color:rgba(0, 0, 0, .5);
  top: 0;
  left: 0;
  z-index: 999;
}
.ruleZhezhaoContent{
  padding: 40rpx 0;
  width: 80%;
  background: #fff;
  margin: 40% auto;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  position: relative;
}

.ruleHide{
  height: 60rpx!important;
  width: 60rpx!important;
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  z-index: 10000;
}
.rule{
  display: block;
  border: 1px solid #fff;
  width: 100rpx;
  text-align: center;
  line-height: 60rpx;
  color: #fff;
  height: 60rpx;
  font-size: 30rpx;
  border-radius: 30rpx;
  position: absolute;
  top: 10%;
  right: 5%;
}
.select{
  width: 520rpx;
  height: 110rpx;
  margin-top: 30rpx;
  margin-bottom: 30rxp;
}

原文地址:https://www.cnblogs.com/chabuer/p/11739227.html

时间: 2024-10-23 13:27:02

小程序实现弹出遮罩层模态框的相关文章

弹出遮罩层后禁止滚动效果

弹出遮罩层后,手指在手机上上下滑动 遮罩层下的页面出现滑动.下面代码解决这个问题 (1)触摸后不产生事件 //遮罩层禁止滚动 $('.searbox_mask_byInteg').bind("touchmove", function (e) { e.preventDefault(); }); (2)body不出现滚动条 $("body,.main").height($(window).height()).css({ "overflow-y": &

弹出遮罩层水平垂直居中

很多时候,登陆注册的时候,会需要弹出一个层,且后面有一层遮罩蒙版层,让后面不可点击状态 且需要这个弹出层是水平垂直居中显示的 固定宽高的水平垂直居中好实现 这里的弹出层,是随着内容撑开的,不固定宽高 ---------------------------- ------------------------------ .wrap .pop { width: 80%; height: auto; background: #FFFFFF; border: 1px #000 solid; -moz-b

JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

JS 点击按钮后弹出遮罩层,有关闭按钮

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="

原生小程序底部弹出层动画过渡

1.wxml <view class="my-dialog" > <view class="my-mask" bindtap="confirmDialog" hidden="{{!showDialog}}" ></view> <view class="my-container" animation="{{animatheightadd}}">

jQuery弹出遮罩层效果完整示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

微信小程序-自定义弹出框

<---------------------------------定义组建-------------------------------------------------------------------------> // components/component-tag-name.js Component({ options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持 }, /** * 组件的属性列表 */ properties: {

[微信小程序]实现一个自定义遮罩层

正文: 先上效果图: 点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层; <button bindtap="showview">Show</button> <view class="bg" bindtap='hideview' style='display:{{display}}'></view> <view class="show" bindtap='hideview' style

sweetalert2 全面替代 alert ,从 sweetalert2 弹出 text 到 弹出 Dom 以及模态框

1. 简易基本版 sweetalert 涵盖日常基本的弹出及对话框 2. 升级版本 sweetalert2 满足常见开发工作中的各种要求 原文地址:https://www.cnblogs.com/zhourongcode/p/9297386.html