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

待我称王封你为后i 2022-11-05 05:27 289阅读 0赞

效果图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]

代码：

<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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: /images/20221023/8c2cce15d33242e5a98a4283529e40d2.png

发表评论取消回复

表情：

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

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

相关阅读

相关修改弹窗_怎么制作无限弹窗效果? 限弹窗代码bat文件分享

炸弹弹屏，也可以叫炸弹弹窗，是可以使用txt制作的一个小程序，效果就是执行程序后会一直不停地弹出窗口，就好像炸弹轰炸一样，如图所示，用来恶作剧很好玩。该怎么制作这个无限弹窗效果

小鱼儿/ 2023年01月06日 13:00/ 0 赞/ 540 阅读

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

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

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

相关 SweetAlert2网页弹窗---JAVASCRIPT弹窗

一个漂亮的、响应式的、可定制的和可访问(WAI-ARIA)的JAVASCRIPT弹窗，无任何依赖中文文档地址:[http://mishengqiang.com/swe

ゞ浴缸里的玫瑰/ 2022年09月04日 14:53/ 0 赞/ 289 阅读

相关弹窗popWindow

窗口背景透明，设置背景透明度 \aarrggbb aa的大小影响窗口透明度的大小 PopupWindow window; View v = this.

野性酷女/ 2022年06月15日 09:24/ 0 赞/ 354 阅读

相关 js弹窗

js的三种最常见的对话框 \[javascript\] [view plain][][copy][view plain] 1. //==================

布满荆棘的人生/ 2022年06月10日 09:47/ 0 赞/ 288 阅读

相关 easyui 弹窗

<div id="dd" class="easyui-dialog" title="My Dialog" style="width: 400px; height: 10

ゝ一世哀愁。/ 2022年05月22日 12:25/ 0 赞/ 283 阅读

相关封装alert弹窗样式

开发过程中，有些样式也是要注重美观的，对此，我们可以对一些基层方法做一些样式处理，是效果看起来更加的符合整体样式。 function alertInfo(message)\{

忘是亡心i/ 2022年05月12日 15:54/ 0 赞/ 335 阅读

相关登陆弹窗

js代码 <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> <

水深无声/ 2022年03月28日 11:14/ 0 赞/ 391 阅读

相关网页弹窗

layer 强烈推荐 [layer官方演示与讲解（jQuery弹出层插件）][layer_jQuery] 手动实现警告框最不推荐的 $(".close"

一时失言乱红尘/ 2022年02月02日 12:43/ 0 赞/ 372 阅读

相关 jQuery--窗体弹窗效果

前言内容显示效果： HTML代码： CSS代码： J

àì夳堔傛蜴生んèń/ 2021年09月27日 05:02/ 0 赞/ 456 阅读