小程序弹窗

最新推荐文章于 2024-08-15 23:03:45 发布

aう风风

最新推荐文章于 2024-08-15 23:03:45 发布

阅读量157

点赞数

本文链接：https://blog.csdn.net/weixin_50478878/article/details/120041874

版权

HTML CSS 弹窗遮罩用户交互

关键词由CSDN通过智能技术生成

html

<!-- 弹窗 -->
  <!-- 灰色遮罩，防止误触，可加可不加 -->
  <view class="mask" wx:if="{{开关}}"></view>
  <!-- 自定义的弹窗 -->
  <view class="windows"  wx:if="{{开关}}">
     <内容。。。。。>
  </view>

css

//阴影
.mask{
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  background-color: #000;
  opacity: 0.5;
}
//弹窗大小样式
.windows{
  width: 84%;
  height: 650rpx;
  background-color: white;
  position: fixed;
  left: 8%;
  top: 30%;
  z-index: 99;
  border-radius: 30rpx;
}