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

相关推荐

  1. 使el-dialog实现拖拽

    2024-07-10 01:48:03       40 阅读
  2. el-dialog 实现可以拖动的

    2024-07-10 01:48:03       25 阅读
  3. 【WPF】出一个显示一个列表

    2024-07-10 01:48:03       66 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 01:48:03       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 01:48:03       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-10 01:48:03       58 阅读
  4. Python语言-面向对象

    2024-07-10 01:48:03       69 阅读

热门阅读

  1. 深度学习之交叉验证

    2024-07-10 01:48:03       24 阅读
  2. 基于深度学习的光度检测

    2024-07-10 01:48:03       21 阅读
  3. Ruby 语法

    2024-07-10 01:48:03       21 阅读
  4. 部署最新版本elasticsearch 8.14.1和 kibana 8.14.1

    2024-07-10 01:48:03       23 阅读
  5. 玩转springboot之springboot使用外置tomcat进行运行

    2024-07-10 01:48:03       22 阅读
  6. 从GPT-1到GPT-3 预训练语言模型的演进与突破

    2024-07-10 01:48:03       26 阅读
  7. k8s常用组件之pod

    2024-07-10 01:48:03       23 阅读
  8. 【PYG】pytorch中size和shape有什么不同

    2024-07-10 01:48:03       21 阅读
  9. linux指令学习

    2024-07-10 01:48:03       23 阅读
  10. 钉钉消息异常通知

    2024-07-10 01:48:03       19 阅读