怎么实现纯CSS弹出框? - CSS笔记

一般比较好看的弹出框都会用到JS,如果只是需要功能,CSS也能实现一个弹出框。接下来看看,怎么实现纯CSS的弹出框这一功能吧

一般比较好看的弹出框都会用到JS,如果只是需要功能,CSS也能实现一个弹出框。接下来看看,怎么实现纯CSS的弹出框这一功能吧。

  • 代码来源:详情
  • 效果演示:页底

代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>纯css实现弹窗</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      font-size: 14px;
      font-family: Arial, Helvetica, sans-serif
    }

    .button {
      background: bisque;
      color: #fff;
      padding: 10px 25px;
    }

    .modal>input {
      display: none;
    }

    .modal>input~* {
      overflow: hidden;
      max-height: 0;
      opacity: 0
    }

    .modal .overlay {
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      position: fixed;
      margin: 0;
      border-radius: 0;
      background: rgba(17, 17, 17, 0.6);
      transition: all 0.3s;
      z-index: 100000;
    }

    .modal .overlay~* {
      border: 0;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%) scale(0.2, 0.2);
      z-index: 1000000;
      transition: all .3s ease;
    }

    .main {
      background: #fff;
      padding: 10px;
    }

    .modal>input:checked~* {
      display: block;
      opacity: 1;
      max-height: 10000px;
    }

    .modal>input:checked~.overlay~* {
      max-height: 90%;
      overflow: auto;
      -webkit-transform: translateX(-50%) translateY(-50%) scale(1, 1);
      transform: translateX(-50%) translateY(-50%) scale(1, 1);
    }

  </style>
</head>

<body>
  <label for="modal_1" class="button">显示模态框</label>

  <div class="modal">
    <input type="checkbox" name="" id="modal_1">
    <label for="modal_1" class="overlay"></label>
    <div class="main">
      <p>
        We have a special offer for you. I am sure you will love it! However this does look spammy...
      </p>
    </div>
  </div>

</body>

</html>

下载权限

查看
  • 免费下载
    评论后下载
    登录后下载

  • {{attr.name}}:
您当前的等级为
您有每天免费下载所有资源次的特权,今日剩余 已取得下载权限
css

怎么添加个性化的鼠标样式? - css笔记

2020-4-29 23:19:06

css

怎么用纯css实现Tab切换? - css笔记

2020-5-10 20:26:43

⚠️
Npcink上的部份代码及教程来源于互联网,仅供网友学习交流,若您喜欢本文可附上原文链接随意转载。
无意侵害您的权益,请发送邮件至 link@baimu.org 或点击右侧 私信:Muze 反馈,我们将尽快处理。
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索