位置: 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)(损失函数是什么)

  • 腾讯视频怎么登录(腾讯视频怎么登录其他微信账号)

    腾讯视频怎么登录(腾讯视频怎么登录其他微信账号)

  • xr支持北斗导航功能吗(苹果xr可以用北斗导航)

    xr支持北斗导航功能吗(苹果xr可以用北斗导航)

  • 手机qq小程序怎么关闭(手机QQ小程序怎么删除)

    手机qq小程序怎么关闭(手机QQ小程序怎么删除)

  • 微信咋发朋友圈

    微信咋发朋友圈

  • wptinytray是什么启动项(wp是什么意思中文)

    wptinytray是什么启动项(wp是什么意思中文)

  • 扫描可以替代传真吗(扫描仪能传播病毒吗)

    扫描可以替代传真吗(扫描仪能传播病毒吗)

  • xboxone连接kinect无反应

    xboxone连接kinect无反应

  • 下单账号是什么(下单账号是什么意思)

    下单账号是什么(下单账号是什么意思)

  • 打字是繁体字怎么回事(打字是繁体字怎么改回来手机)

    打字是繁体字怎么回事(打字是繁体字怎么改回来手机)

  • b站ul怎么升级(b站ul怎么升级哪里看)

    b站ul怎么升级(b站ul怎么升级哪里看)

  • 笔记本电脑第一次开机注意事项(笔记本电脑第一次充电需要注意什么)

    笔记本电脑第一次开机注意事项(笔记本电脑第一次充电需要注意什么)

  • 声音属于感觉媒体吗(声音属于感觉媒体图像属于表现媒体)

    声音属于感觉媒体吗(声音属于感觉媒体图像属于表现媒体)

  • 魅族16T可以升5G吗(魅族16t支不支持5g)

    魅族16T可以升5G吗(魅族16t支不支持5g)

  • 简述三层交换机的作用(简述三层交换机的原理)

    简述三层交换机的作用(简述三层交换机的原理)

  • 苹果7p定位在哪里设置(iphone7plus定位在哪里设置)

    苹果7p定位在哪里设置(iphone7plus定位在哪里设置)

  • 微信怎么刷公交乘车码(微信怎么刷公交车乘车码支付)

    微信怎么刷公交乘车码(微信怎么刷公交车乘车码支付)

  • 抖音再靠近一点点怎么拍(抖音再靠近一点点歌词)

    抖音再靠近一点点怎么拍(抖音再靠近一点点歌词)

  • 电话未接通什么意思(电话未接通对方知道吗)

    电话未接通什么意思(电话未接通对方知道吗)

  • 网易云音乐如何关闭心动模式(网易云音乐如何显示歌词)

    网易云音乐如何关闭心动模式(网易云音乐如何显示歌词)

  • 手机怎么设置打电话不断网(手机怎么设置打电话是关机状态)

    手机怎么设置打电话不断网(手机怎么设置打电话是关机状态)

  • 手机qq录屏功能在哪(手机qq录屏功能什么时候有的?)

    手机qq录屏功能在哪(手机qq录屏功能什么时候有的?)

  • Win11怎么提高运行速度和性能? windows11系统设置的方法(win11怎么提高运行内存)

    Win11怎么提高运行速度和性能? windows11系统设置的方法(win11怎么提高运行内存)

  • 【已解决】探究CUDA out of memory背后原因,如何释放GPU显存?(想要探究的问题)

    【已解决】探究CUDA out of memory背后原因,如何释放GPU显存?(想要探究的问题)

  • 测试工程师正遭「革命」 AI将改写测试模式(测试工程师有前途么)

    测试工程师正遭「革命」 AI将改写测试模式(测试工程师有前途么)

  • groupmems命令  管理用户主要组群的成员(groupdel命令详解)

    groupmems命令 管理用户主要组群的成员(groupdel命令详解)

  • 业务招待费福利费怎么算超支
  • 无法支付其他应付款说明
  • 期间费用包括资本公积吗
  • 个税专项扣除需要提供哪些依据
  • 开票方没缴税咋办
  • 企业自建厂房转让如何计算增值税
  • 航天信息开票步骤
  • 哪些情况下小型车不能走
  • 增值税申报错误已经扣税怎么处理
  • 餐饮充值赠送
  • 不同税率的发票可以合并入账吗
  • 工程服务的采购合同范本
  • 合并报表的收入是相加吗
  • 支付店面租金为什么是管理费用
  • 计提待摊费用怎么记账
  • 任务栏没反应怎么重启
  • win11可以触屏吗
  • php stream_get_meta_data返回值
  • php获取ftp文件目录
  • 预收账款可以挂账多久
  • 图像分割 unet
  • yii2框架从入门到精通
  • php图形用户界面
  • k8s部署ingress-nginx
  • 差额征税七种业务是什么
  • 工程施工科目下的招待费,汇算清缴
  • php远程调用
  • 规划设计费会计处理
  • 收汇和结汇都有什么
  • 红字申请表开错了怎么办
  • 公司购买家电开什么发票
  • 出口报关需要增税吗
  • 金税盘怎么设置字体
  • 安装mysql时出现错误
  • 处置长期股权投资其他综合收益结转
  • 安装sql server 2008提示重新启动计算机
  • 应交税费在会计科目的借贷方向
  • 普通发票一般几个点
  • 机械租赁的主要工作内容
  • 汇算清缴后取得上一年发票
  • 支出记账凭证单手写
  • 以前年度损益调整是什么意思
  • 设备安装成本怎么结转
  • 产权转移书据印花税
  • 定期存款账务怎么处理
  • 外币资本金入账汇率怎样选择
  • 会计原始分录包括什么
  • 应计入营业外支出的有哪些
  • 计提工会经费如何扣除
  • 根据银行回单做凭证
  • 存储过程 decode
  • 高效的sql语句
  • windows7 ip地址冲突
  • macbookpro怎么提升性能
  • linux的命令行指的是什么
  • /wlan direct
  • win8如何添加启动项
  • win10电脑清理磁盘
  • 本地磁盘文件系统
  • macbook看视频卡顿
  • window10路由
  • win10 window
  • dpd参数
  • win10如何使用usb无线网卡
  • 详解linux中systemd命令的运行级别与其常见应用
  • 教你如何在家自己测瞳距
  • listview的view属性
  • perl命令
  • android studio打包jar文件
  • 如何消除手机自动出现的广告
  • python-flask
  • android车载导航刷机包
  • python算法怎么用
  • jquery属性选择器,选取所有带href
  • flask框架图
  • js中弹出对话框
  • jQuery中Ajax全局事件引用方式及各个事件(全局/局部)执行顺序
  • 江苏契税补贴怎么领取
  • 预测收入遵循什么方法
  • 税务稽查会打电话吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设