位置: IT常识 - 正文

纯css实现自定义弹窗(css 自定义变量)

编辑:rootadmin
纯css实现自定义弹窗 前言:

推荐整理分享纯css实现自定义弹窗(css 自定义变量),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:css自定义选择器,自定义css样式怎么添加,css自定义函数,css自定义属性,css自定义函数,自定义css是什么意思,自定义css怎么写,自定义css怎么写,内容如对您有帮助,希望把文章链接给更多的朋友!

有必要先了解以下思路再进行代码的书写

思路### 其实弹窗实现很简单: 1. 首先准备一个顶层div 将作为弹窗 设置z-index为一个比较大的值,如z-index=30,使其置于顶层; 设置display:none,使初始被隐藏; 2. 添加锚定行为 定义一个a标签,使被点击时弹窗div被锚定,会触发被锚定标签的“当前活动”伪类样式 3. 给弹窗div设置“当前活动”伪类样式,即:弹窗div:target{css} 使其显示:display:block​ 4. 给弹窗div添加一个子a标签,用于隐藏窗口 给这个子a标签href="#"        当点击后使弹窗div不为当前活动元素,从而使其target伪类样式不生效### 另外使整个网页背景虚化: 其实也是主要利用z-index来实现一个图层,该图层尺寸占整个网页窗口尺寸、有一定的透明度、在弹窗div中定义作为其子元素(使具有和弹窗相同的行为)代码<style>    html,body{        margin: 0;        padding: 0;        width: 100%;        height:100%;   }    .app{        width: 100%;        height: 100%;   }    .window{        position: fixed;        top: 0;        right: 0;        left: 0;        bottom: 0;        display: none;        background-color: rgba(0, 0, 0, 0.2);        z-index: 20;    /*背景层*/        text-align: center;   }​    .window:target{        display: block;​   }    .window_content{        width: 400px;        height: 400px;        margin: 15% auto;        z-index: 30;    /*置顶窗口层*/        background-color: pink;   }</style>​​​​<!-- 在这里设置一个弹窗 --><div id="window" class="window">    <div class="window_bg"></div>    <div class="window_content">        <h1>MyWindow</h1>        <h2>hello world</h2>        <a href="#">关闭</a>    </div></div>​<div class="app">    <button class="link">        <a href="#window">弹窗</a>    </button></div>
本文链接地址:https://www.jiuchutong.com/zhishi/297849.html 转载请保留说明!

上一篇:前端面试题 | 什么是回流和重绘?它们的区别是什么?(前端面试题什么是网络协议)

下一篇:损失函数 | BCE Loss(Binary CrossEntropy Loss)(损失函数是什么)

  • 论坛如何推广(论坛推广怎么写)

    论坛如何推广(论坛推广怎么写)

  • 缘来缘去(缘来缘去缘如水下一句)

    缘来缘去(缘来缘去缘如水下一句)

  • 华为手机怎么两个密码两个桌面(华为手机怎么两个界面切换)

    华为手机怎么两个密码两个桌面(华为手机怎么两个界面切换)

  • 惠普3630墨盒清零(惠普3630墨盒清零图解)

    惠普3630墨盒清零(惠普3630墨盒清零图解)

  • 将微处理器内存储器及IO接口连接起来的总线(将微处理器内存储器及io接口连接起来的是)

    将微处理器内存储器及IO接口连接起来的总线(将微处理器内存储器及io接口连接起来的是)

  • 苹果小白点打开了不显示(苹果小白点打开速度慢)

    苹果小白点打开了不显示(苹果小白点打开速度慢)

  • 小米平衡车蓝牙怎么连接(小米平衡车蓝牙怎么连接不上)

    小米平衡车蓝牙怎么连接(小米平衡车蓝牙怎么连接不上)

  • 笔记本电脑能开直播吗(笔记本电脑能开流量吗)

    笔记本电脑能开直播吗(笔记本电脑能开流量吗)

  • 华为dav703l什么型号

    华为dav703l什么型号

  • ipad a1599是什么机型(ipad a1599是ipad几)

    ipad a1599是什么机型(ipad a1599是ipad几)

  • wps怎么分节(wps怎么分节打印)

    wps怎么分节(wps怎么分节打印)

  • 快手注销后别人还能看到吗(快手注销后别人还能看到之前的私信吗)

    快手注销后别人还能看到吗(快手注销后别人还能看到之前的私信吗)

  • 升级MIUI11小米8听筒音量小(小米8升级11.0.4)

    升级MIUI11小米8听筒音量小(小米8升级11.0.4)

  • usb3.0和3.1区别(usb3.0和3.1有区别吗)

    usb3.0和3.1区别(usb3.0和3.1有区别吗)

  • 手机qq咋关闭星座年龄(手机qq怎么关闭星座运势)

    手机qq咋关闭星座年龄(手机qq怎么关闭星座运势)

  • 快手关注6人为什么显示22(快手关注人为什么没了)

    快手关注6人为什么显示22(快手关注人为什么没了)

  • word编号怎么设置(word编号怎么设置字体)

    word编号怎么设置(word编号怎么设置字体)

  • 华为手机卸载自带软件(华为手机卸载自带输入法)

    华为手机卸载自带软件(华为手机卸载自带输入法)

  • 微信视频怎么下载到电脑(微信视频怎么下载保存)

    微信视频怎么下载到电脑(微信视频怎么下载保存)

  • 趣步糖果怎么置换(趣步的糖果)

    趣步糖果怎么置换(趣步的糖果)

  • 两个oppo手机怎么互相定位(两个oppo手机怎么同步所有东西)

    两个oppo手机怎么互相定位(两个oppo手机怎么同步所有东西)

  • win10锁屏壁纸在哪个文件夹(win10锁屏壁纸在哪)

    win10锁屏壁纸在哪个文件夹(win10锁屏壁纸在哪)

  • 迅雷影音如何倍速播放(迅雷影音播放速度怎么设置)

    迅雷影音如何倍速播放(迅雷影音播放速度怎么设置)

  • 荣耀20后台怎么关闭

    荣耀20后台怎么关闭

  • 腾讯电脑管家网络连接工具有什么功能?(腾讯电脑管家网络修复)

    腾讯电脑管家网络连接工具有什么功能?(腾讯电脑管家网络修复)

  • 增值税以物易物税收政策
  • 普通发票忘记开数量和单价可以用吗
  • 职工的困难补助计入什么科目
  • 出租包装物租金是营业外收入吗
  • 营业执照经营范围劳务怎么写
  • 集团内部借款利息可以税前扣除吗
  • 工业土地划拨性质有年限吗
  • 政府补助的核算方法名词解释
  • 公司购买软件著作权
  • 基本生产车间领用周转材料会计分录
  • 留抵进项税抵欠税后期末未交增值税会减少吗
  • 企业所得税中的不征税收入有哪些
  • 异地预缴企业所得税几个点
  • 实收资本弥补亏损账务处理
  • 上报汇总和抄报是一个意思吗
  • 一般纳税人的增值税应纳税额等于
  • 预缴的企业所得税可以税前扣除吗
  • 公司向个人租车协议范本
  • 资产处置损益在企业所得税汇算时如何填列
  • 记账公司如何平衡收入成本费用?
  • 税控盘登不上怎么回事
  • 怎么查询企业的注册资金
  • 化妆品的消费税率多少
  • 装修公司购装修材料入什么科目?
  • 苹果手机删除的备忘录怎么恢复
  • 股东分担债务
  • 什么叫存量房转移登记
  • 投资收益怎么做不影响利润
  • php tokenizer
  • el-upload上传文件大小限制
  • 月末季末年末会计都需要做什么
  • 如何用php制作网页
  • 购买股票会计处理流程
  • php如何上传1个g以上的文件
  • js中的截取字符串
  • alex研究原文
  • vue viewui
  • web网页设计期末作业猫眼电影首页
  • php环境搭建apache
  • 去年多计提的所得税怎么调整
  • 长期待摊当期发票怎么开
  • 拆迁补偿账务处理办法
  • 成本费用票包括哪些
  • 增值税一般纳税人可以开普票吗
  • 会计中金额的正负怎么算
  • sqlserver 中charindex/patindex/like 的比较
  • 个人所得税是全国联网的吗
  • 物流货损怎样处理
  • 增值税防伪税控系统
  • 酒店购买天然气开票的摘要写什么
  • 劳动局仲裁花钱吗
  • 销售边角废料属于什么
  • 如何审计主营业务收入的真实性问题
  • 公司账户收入金额有规定吗
  • 会计账簿按账页不同可以分为
  • 滞留专票会有什么风险
  • 旅游企业相关服务案例
  • win7硬盘设置在哪里设置
  • 如何隐藏windows激活水印
  • windowsxp开机加载页面不动
  • win7系统安装虚拟机
  • win8.1如何更改密码
  • win8应用商店在哪
  • win8笔记本电脑投屏方法
  • win10 功能
  • OpenGL_砖块着色案例
  • mvp设计方案
  • cocos2dx引擎
  • 启用opengl的文档窗口
  • JavaScript instanceof 的使用方法示例介绍
  • github常用操作
  • 手机屏幕适配
  • shell截取字段
  • linux如何剪切文件
  • unity调色插件
  • Python for Informatics 第11章 正则表达式(一)
  • jQuery AJAX timeout 超时问题详解
  • js实现类
  • 武汉市国税局长
  • 辽宁地税电子税票查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设