html H5 dialog弹窗学习,实现弹窗显示内容 替代confirm、alert

html H5 dialog弹窗学习,实现弹窗内容 替代confirm
框架使用的mui,使用mui.confirm() 弹窗内容过多时,弹窗被撑的到屏幕外去了,使用H5 dialog 标签自定义一个固定大小的弹窗,内容过多时可下拉显示

效果展示

隐私政策内容很多,可以下拉显示

在这里插入图片描述

代码

myDialog.css

dialog{padding:0;border:none;box-shadow:0px 1px 3px rgba(0,0,0,0.2);width:80%;border-radius:10px;height: 430px;
}
.diaHeader{padding:10px;color:#fff;border-radius:10px 10px 0 0;background:#50a8fa;
}
.diaContent{padding:30px 12px 30px 12px;overflow: auto;height: calc(100% - 91px);
}
.diaFooter{display: flex;align-items

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/3223819.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

2024年信息系统项目管理师1批次上午客观题参考答案及解析(3)

51、探索各种选项,权衡包括时间与成本、质量与成本、风险与进度、进度与质量等多种因素,在整个过程中,舍弃无效或次优的替代方案,这种不确定性应对方法是()。 A.集合设计 B.坚韧性 C.多种结果…

odoo17 常见升级问题

通用问题 模型名变更 字段变更 方法名变更 方法参数变更 xml数据结构定义变化 xml的id变更 view视图变化,导致xpath路径出差 template结构变化,,导致xpath路径出差,或者id不存在 升16问题 前端owl的架构变化 升17问题 前端 标…

db期末复习自用[应试向 附习题]

第一章 数据库系统实现整体数据的结构化,主要特征之一,是db区别于文件系统的本质区别。 数据库系统三个阶段:人工、文件、数据库系统。 数据库管理系统的功能:数据库定义、操纵 、(保护、存储、维护)、数…

招投标信息采集系统:让您的企业始终站在行业前沿

一、为何招投标信息如此关键? 在经济全球化的大背景下,招投标活动日益频繁,成为企业获取项目、拓展市场的主流方式之一。招投标信息采集,作为企业战略决策的前置环节,其重要性不言而喻。它不仅关乎企业能否第一时间发…

Open3D 点对面的ICP算法配准(精配准)

目录 一、概述 1.1核心思想 1.2实现步骤 二、代码实现 2.1关键函数 2.2完整代码 三、实现效果 3.1原始点云 3.2配准后点云 3.3计算数据 一、概述 基于点对面的ICP(Iterative Closest Point)配准算法是ICP的一种变体,它通过最小化源…

昇思MindSpore学习总结十二 —— ShuffleNet图像分类

当前案例不支持在GPU设备上静态图模式运行,其他模式运行皆支持。 1、ShuffleNet网络介绍 ShuffleNetV1是旷视科技提出的一种计算高效的CNN模型,和MobileNet, SqueezeNet等一样主要应用在移动端,所以模型的设计目标就是利用有限的计算资源来达…

数学建模中常用的数据处理方法

常用的数据处理方法 本文参考 B站西电数模协会的讲解视频 ,只作笔记提纲,想要详细学习具体内容请观看 up 的学习视频。一般来说国赛的 C 题一般数据量比较大。 这里介绍以下两种方法: 数据预处理方法 数据分析方法 数据预处理方法 1. 数据…

【电脑应用技巧】如何寻找电脑应用的安装包华为电脑、平板和手机资源交换

电脑的初学者可能会直接用【百度】搜索电脑应用程序的安装包,但是这样找到的电脑应用程序安装包经常会被加入木马或者强制捆绑一些不需要的应用装入电脑。 今天告诉大家一个得到干净电脑应用程序安装包的方法,就是用【联想的应用商店】。联想电脑我是一点…

alibabacloud学习笔记11

讲解什么是配置中心及使用前后的好处 讲解Nacos作为配置中心面板介绍 官方文档 Nacos config alibaba/spring-cloud-alibaba Wiki GitHub 加入依赖: 订单服务和视频服务也加上这个依赖。 讲解Nacos作为配置中心实战 订单服务添加配置。 我们注释掉之前的配置。 …

现代化3D Web轻量引擎HOOPS Communicator:基于ESM的代码库转型!

HOOPS Communicator自2024.2.0版本起,向基于ECMAScript Modules (ESM)的系统迁移的决策和技术细节。文章分析了这一转型对代码组织、封装、依赖管理、性能以及与现代JavaScript开发实践兼容性的积极影响,并讨论了IIFE和UMD的兼容性支持。 引言 随着Jav…

Dynamics365 UCI下的高级查找(不要留恋Classic了)

UCI界面已经用了多年了,在Classic下的的高级查找按钮(漏斗icon)已不见踪影 但因为使用习惯问题,还是有人会通过右上角高级设置,进入Classic界面找到漏斗Icon来使用高级查找 但新的UCI风格下已经没了高级查找的概念,取而代之的是基…

C++代码编程学习:基于对象的编程风格——习题4.5(Essential C++ 第四章)

C中基于对象的编程风格的学习,非常有难度,概念很抽象,操作起来也比较费脑子,这里主要把一些知识点和习题给过一遍! 一、前言 C中基于对象的编程风格的学习(Essential C 第四章)。 二、例题 -…

设计无缝体验:交互设计流程全解析

完整的产品交互设计流程是什么?完整的产品交互设计流程包括研究用户需求、指定信息架构、制作产品原型、进行用户测试和实时发布产品。交互设计就是从人与产品之间的关系入手,通过产品设计来满足大众的日常需求。随着网络技术的流行,产品交互…

快速将一个网址打包成一个exe可执行文件

一、电脑需要node环境 如果没有下面有安装教程: node.js安装及环境配置超详细教程【Windows系统安装包方式】 https://blog.csdn.net/weixin_44893902/article/details/121788104 我的版本是v16.13.1 二、安装nativefier 这是一个GitHub上的开源项目&#xff1a…

Codeforces Round 954 (Div. 3) F. Non-academic Problem

思路&#xff1a;考虑缩点&#xff0c;因为是无向图&#xff0c;所以双连通分量缩完点后是一棵树&#xff0c;我们去枚举删除每一条树边的答案&#xff0c;然后取最小值即可。 #include <bits/stdc.h>using namespace std; const int N 3e5 5; typedef long long ll; …

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片(Form_Vision部分代码)

2.5 C#视觉程序开发实例1----CamManager实现模拟相机采集图片(Form_Vision部分代码) 1 目标效果视频 CamManager 2 增加一个class IMG_BUFFER 用来管理采集的图片 // <summary> /// IMG_BUFFER 用来管理内存图片的抓取队列 /// </summary> public class IMG_BUFF…

AI赋能,全面筑牢防线:重点非煤矿山重大灾害风险防控系统探析

一、背景需求 随着工业化和现代化的快速发展&#xff0c;非煤矿山作为重要的资源开采基地&#xff0c;其安全生产问题日益受到社会各界的广泛关注。非煤矿山在开采过程中&#xff0c;面临着诸多重大灾害风险&#xff0c;如滑坡、坍塌、水害、火灾等&#xff0c;这些灾害一旦发…

前端面试题34(在移动应用中,通用的实时传输协议)

在移动应用中&#xff0c;选择实时传输协议时通常会考虑几个关键因素&#xff1a;网络效率、功耗、实时性、跨平台兼容性以及数据类型&#xff08;如文本、图像、视频&#xff09;。以下是几种常用的实时传输协议及其在移动应用中的适用性&#xff1a; 1. WebSocket WebSocke…

Java面试八股之MySQL中int(10)和bigint(10)能存储读的数据大小一样吗

MySQL中int(10)和bigint(10)能存储读的数据大小一样吗 在MySQL中&#xff0c;int(10)和bigint(10)的数据存储能力并不相同&#xff0c;尽管括号内的数字&#xff08;如10&#xff09;看起来似乎暗示着某种关联&#xff0c;但实际上这个数字代表的是显示宽度&#xff0c;而不是…

threejs基础入门案例研究——三维立体物体沿指定曲线循环移动

效果 代码展示 主要思路是先创建指定曲线路径,并将其分为1000个点,然后按照自定义路线从头遍历点的位置,然后修改物体位置以及朝向等,实现三维立体物体沿指定曲线循环移动的效果。这里以vue3代码为例,进行展示 <template><div class="threejs">&l…