怎么实现纯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}}:
您当前的等级为
登录后免费下载登录 小黑屋反思中,不准下载! 评论后刷新页面下载评论 支付以后下载 请先登录 您今天的下载次数(次)用完了,请明天再来 支付积分以后下载立即支付 支付以后下载立即支付 您当前的用户组不允许下载升级会员
您已获得下载权限 您可以每天下载资源次,今日剩余
Typecho

Neal - 简约Typecho响应式个人文档主题

2020-8-14 17:11:03

网站

百度搜索网页标题规范

2019-6-21 0:01:30

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