前端学习记录011_自定义对话框

最新推荐文章于 2023-02-07 00:41:42 发布

Duckdan

最新推荐文章于 2023-02-07 00:41:42 发布

阅读量153

点赞数

分类专栏： # 前端学习记录

本文链接：https://blog.csdn.net/Duckdan/article/details/117330787

版权

前端学习记录专栏收录该内容

13 篇文章 0 订阅

订阅专栏

二、源代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  <title>自定义提示对话框</title>
  <style>
    *{
      margin:0;
      padding: 0;
    }
    html,body{
      width: 100%;
      height: 100%;
    }
    #app {
      width: 100%;
      height: 100%;
      background-color: #f5f5f5;
    }
    #app #alter {
      /*相对于viewport定位*/
      position: fixed;
      width: 100%;
      height: 100%;
      /*居右*/
      left: 0;
      /*居顶*/
      top: 0;
      background-color: rgba(0,0,0,0.5);
    }
    #app #alter .alter_container {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 60%;
      /*为了实现垂直水平居中，使用两个变化函数是为了在执行动画的时候保持一致*/
      transform: translate(-50%, -50%) scale(1);
      background-color: #fff;
      border-radius: 4px;
      animation: tipMove 0.4s;
    }
    #app #alter .alter_top {
      position: relative;
      padding: 20px 0px 0px;
      text-align: center;
    }
    #app #alter .alter_top .icon_container {
      position: relative;
      display: flex;
      left: 50%;
      width: 59px;
      height: 59px;
      transform: translateX(-50%);
      border: 2px solid #f8cb86;
      border-radius: 50%;
      /*设置主轴方向为垂直方向*/
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    #app #alter .alter_top .icon_container .mark_top {
      display: block;
      width: 2px;
      height: 30px;
      background-color: #f8cb86;
    }
    #app #alter .alter_top .icon_container .mark_bottom {
      display: block;
      width: 2px;
      height: 2px;
      margin-top: 2px;
      background-color: #f8cb86;
    }
    #app #alter .alter_top .tip_text {
      display: inline-block;
      width: 100%;
      box-sizing: border-box;
      margin-top: 10px;
      color: #333;
      font-size: 14px;
      text-align: center;
      padding: 0 10px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #app #alter .alter_bottom {
      margin-top: 10px;
      color: #fff;
      line-height: 35px;
      font-size: 18px;
      font-weight: 700;
      text-align: center;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      background-color: #4cd964;
    }

    @-moz-keyframes tipMove {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      35% {
        transform: translate(-50%, -50%) scale(0.8);
      }
      70% {
        transform: translate(-50%, -50%) scale(1.1);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }
    @-webkit-keyframes tipMove {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      35% {
        transform: translate(-50%, -50%) scale(0.8);
      }
      70% {
        transform: translate(-50%, -50%) scale(1.1);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }
    @-o-keyframes tipMove {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      35% {
        transform: translate(-50%, -50%) scale(0.8);
      }
      70% {
        transform: translate(-50%, -50%) scale(1.1);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }
    @keyframes tipMove {
      0% {
        transform: translate(-50%, -50%) scale(1);
      }
      35% {
        transform: translate(-50%, -50%) scale(0.8);
      }
      70% {
        transform: translate(-50%, -50%) scale(1.1);
      }
      100% {
        transform: translate(-50%, -50%) scale(1);
      }
    }
  </style>
</head>
<body>
  <div id="app">
    <div style="width: 100%;height: 100%;background-color:pink;font-size: 40px">
      自定义遮罩
    </div>
    <div id="alter" class="off">
      <div class="alter_container">
        <div class="alter_top">
          <span class="icon_container">
             <span class="mark_top"></span>
             <span class="mark_bottom"></span>
          </span>
          <span class="tip_text">手机号不正确手机号不正确手机号不正确手机号不正确手机号不正确手机号不正确</span>
        </div>
        <div class="alter_bottom">
          确认
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Duckdan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习记录011_自定义对话框

二、源代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"> <title>自定义提示对话框<...
复制链接

扫一扫

专栏目录