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

效果图：

代码：

<view class="popupBlock" v-if="showPopupBlock"><view class="xxx"><image class="xxxImg" @click="showPopupBlock=false" mode="widthFix" src="../../static/xxx.png"></image></view><view class="popupCrad"><view class="popupCradCentent"><view class="popupCradCententTitle">关于如何正确进行体格测量</view><view class="popupCradCententItems">身高 / 身长</view><view class="popupCradCententDtails">随便啦</view></view></view>
</view>

css


<style lang="scss" scoped>.popupBlock {background-color: rgba(0, 0, 0, 0.7);position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;.xxx {position: fixed;top: 120rpx;width: 70rpx;height: 70rpx;right: 70rpx;.xxxImg {width: 60rpx;height: 60rpx;}}.popupCrad {position: fixed;top: 210rpx;border-radius: 26rpx;background-color: #fff;width: 80%;left: 10%;min-height: 500rpx;.popupCradCentent{margin: 40rpx 30rpx 30rpx 30rpx;.popupCradCententTitle{font-size: 36rpx;font-weight: 600;margin-top: 50rpx;text-align: center;}.popupCradCententItems{font-size: 32rpx;font-weight: 600;margin-top: 50rpx;}.popupCradCententDtails{margin-top: 30rpx;font-size: 30rpx;                 }}}}
</style>

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

样式集（14）填写信息弹窗
代码 <template><view class="mxBoom"><view class="mxBoomContent"> ...
Openlayers中使用Overlay实现点击要素显示html内容弹窗并且动态更改弹窗内容
场景 Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动: Openlayers中使用Overlay实现点击要素弹窗并且弹窗随之移动_BADAO_LIUMANG_QIZHI的博客 ...
vue el-dialog 实现弹窗无限嵌套（点击弹窗弹出新的弹窗，可以一直点击）
使用场景: 要求点击数据展示弹窗,弹窗中数据点击显示新的弹窗,里面的弹窗还可以继续点击新的弹窗,可以无限制的嵌套弹窗为什么不用el-dialog的append-to-body? 原因:因为有些弹窗既 ...
【Unity3D-UGUI应用篇】（四）使用UGUI弹窗显示模型及弹窗模型交互
推荐阅读 CSDN主页 GitHub开源地址 Unity3D插件分享简书地址我的个人博客 QQ群:1040082875 大家好,我是佛系工程师☆恬静的小魔龙☆,不定时更新Unity开发技巧,觉得有 ...
Oracle实现弹窗,一个DIV小弹窗 JS实现
今天,试了一个小弹窗功能,可以在新增之类的方面加入. 代码如下: CSS样式,放中 #topCoverDiv { opacity: 0.4; position: absolute; width: 3 ...
微信小程序底部弹窗（半屏弹窗）---WeUI组件使用
小程序的底部弹窗(半屏弹窗) 我这里主要是使用小城的原生组件WeUI来完成的,需要引入WeUI组件库.这里就不教如何引入库,主要讲解如何使用Half Screen Dialog标签. 首先就是通过js ...
小程序开发：小程序的底部弹窗（半屏弹窗）
小程序的底部弹窗(半屏弹窗) 我这里主要是使用小程序的原生组件WeUI来完成的,需要引入WeUI组件库.这里就不教如何引入库,需要导入WeUI组件库的请看小程序开发:轻松导入WeUI包主要讲解如何 ...
鼠标放到标签上面显示弹窗，滑过弹窗后，弹窗显示，移出标签和弹窗，弹窗消失
文章目录方案一方案二鼠标放到标签上面显示弹窗,滑过弹窗后,弹窗显示,移出标签和弹窗,弹窗消失方案一标签和弹窗放到同一个父级元素下,给父级元素鼠标滑过事件. 效果图: style 文件 .na ...
word精华样式篇之三使用样式集让所有文档风格统一
回顾:样式是样式是一组格式特征,例如字体名称.字号.颜色.段落对齐方式和间距. 一. 保存自己的专属样式我们将自己工作文档设置好了各级标题格式后,希望以后打开word就直接使用这种样式,在关闭当前文 ...
怎么提高es服务器的性能,es集群服务器配置规则是怎样的？什么是es集群
es集群服务器配置,可能大家都不是特别的了解,那么,es集群服务器配置规则是怎样的呢?es为什么要实现集群?这是大家都想知道的,接下来我们就跟着小编来看看这方面的内容吧. es集群服务器配置 es为什 ...

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

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

最新文章

热门文章