今天看到一个纯css模态框，觉得是很牛呀

看了下用了target伪类，

一直不知道有这么神奇的伪类

。。

用法是这样的，给模态框一个id，

<div id="pop" class="overlay">

然后通过锚链接的方法

<a class="button" href="#pop">Click!</a>

点击之后，伪类的css就能发生作用了

.overlay:target {

  visibility: visible;

  opacity: 1;

}

.overlay:target > .modal {

  transform: translateY(30%) scale(0.9);

  transition-timing-function: cubic-bezier(0.8, 0, 0, 1.5);

  opacity: 1;

}

顺便把别人的源码发一下

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>CSS模态框-jq22.com</title>

<style>

html, body {

  height: 100%;

  -webkit-font-smoothing: antialiased;

  -webkit-tap-highlight-color: transparent;

}

body {

  margin: 0;

  background-color: #FAFAFB;

  color: slategrey;

}

a.button {

  text-decoration: none;

  text-align: center;

  text-shadow: 0 1px 0 #fff;

  color: steelblue;

  font-weight: 500;

  padding: 8px 15px 8px 15px;

  border: 1px solid rgba(26, 53, 71, 0.1);

  border-radius: 4px;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  transition: .25s;

  background: linear-gradient(white, ghostwhite);

}

a.button:hover {

  border: 1px solid rgba(26, 53, 71, 0.2);

  background: white;

}

.wrapper {

  width: 600px;

  height: 100%;

  margin: auto;

  text-align: center;

  display: -webkit-box;

  display: -moz-box;

  display: -ms-flexbox;

  display: -webkit-flex;

  display: flex;

  align-items: center;

  justify-content: center;

}

.overlay {

  position: fixed;

  top: 0;

  bottom: 0;

  left: 0;

  right: 0;

  background: rgba(0, 0, 0, 0.7);

  transition: opacity .5s;

  visibility: hidden;

  opacity: 0;

}

.overlay:target {

  visibility: visible;

  opacity: 1;

}

.modal {

  width: 20%;

  position: relative;

  margin: auto;

  padding: 1.5rem;

  background: #fff;

  border-radius: 4px;

  -webkit-border-radius: 4px;

  -moz-border-radius: 4px;

  transition: .5s;

  opacity: 0;

}

.modal .content {

  margin-top: 1rem;

}

.modal .content a {

  max-width: 60%;

  margin: auto;

  display: block;

}

.overlay:target > .modal {

  transform: translateY(30%) scale(0.9);

  transition-timing-function: cubic-bezier(0.8, 0, 0, 1.5);

  opacity: 1;

}

h2 {

  text-align: center;

  margin-top: 2rem;

}

a.close {

  position: absolute;

  top: 15px;

  left: 15px;

  width: 22px;

  height: 22px;

  text-decoration: none;

  text-align: center;

  font-size: 20px;

  line-height: 21px;

  color: lightslategrey;

  background-color: lightgrey;

  border-radius: 50%;

  -webkit-border-radius: 50%;

  -moz-border-radius: 50%;

  transition: .25s;

}

a.close:hover {

  background-color: tomato;

  color: white;

}

</style>

</head>

<body>

<div class="wrapper">

  <a class="button" href="#pop">Click!</a>

</div>

<div id="pop" class="overlay">

  <div class="modal">

    <h2>Hey there!</h2>

    <a class="close" href="#">×</a>

    <div class="content">

      So, here we are:<br/>

      I am a pure (S)CSS Modal and work with the <strong>:target</strong> element.<br/><br/>

      You can close me by clicking the x in the upper left corner or the button at the bottom.<br/><br/>

      See you next time:)<br/><br/>

      <a class="button" href="#">Close</a>

    </div>

  </div>

</div>

</body>

</html>

伪类target实现纯css模态框的更多相关文章

  1. 使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单

    html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...

  2. 大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）

    留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...

  3. 【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG

    IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...

  4. 【转】链接伪类（:hover）CSS背景图片有闪动BUG

    来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...

  5. 【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

    引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...

  6. 纯css单选框

    1.没有用bootstrap时: .has_sel,.un_sel{display:block; width:16px; height: 16px; border: 1px solid #B06A50 ...

  7. 好看css搜索框样式_分享8款纯CSS搜索框

    最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...

  8. 纯CSS气泡框实现方法探究

    气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...

  9. 利用animation和text-shadow纯CSS实现loading点点点的效果

    经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

随机推荐

  1. Python复习笔记（一）高级变量类型

    目标 列表元组 字典 字符串 公共方法 变量高级 01. 列表 02. 元组 03. 字典 04. 字符串 1)判断类型 - 9 2) 查找和替换 - 7 3) 大小写转换 - 5 4) 文本对齐 - ...

  2. Dojo与jQuery综合比较分析

    最近一直都在参与项目,无法抽空写些或者看些东西,周末抽了点时间看了下关于Dojo和Jquery的东西,在CSDN上看到一篇两个框架进行对比的文章,感觉写的不错,就拿了过来,没有别的意思,一来想保留下来 ...

  3. 20155204 2016-2017-2 《Java程序设计》第6周学习总结

    20155204 2016-2017-2 <Java程序设计>第6周学习总结 教材学习内容总结 一切皆对象,输入输出也是类,线程也是 String对象的trim方法去掉首尾空格和空字符 f ...

  4. luogu P3924 康娜的线段树

    题面传送门 我们可以画图找规律 这里没图,要看图可以去看M_sea dalao的题解(逃 可以发现单个节点\(i\)对答案的贡献为该节点的点权\(*\frac{1}{2^{dep_i}}\)(\(de ...

  5. [转]C++11的enum class & enum struct和enum

    1. 旧版enum存在的问题 问题 描述 1 向整形的隐式转换(Implicit conversion to an integer) 2 无法指定底层所使用的数据类型(Inability to spe ...

  6. 零基础http代理http完美代理访问

    如果翻过墙,或者做过渗透啥的,肯定对代理不陌生,说白了,代理服务器就是一个中转站,你对目标网址的请求都会进过代理服务器去请求,类似于一个被你操控的傀儡,别人能知道的也只能是这个代理,从而提升安全性和访 ...

  7. Maven整合Spring3.0+Mybatis3.2+Struts2.3+查找坐标+jar包依赖(五)

    依赖传递 只添加了一个struts2-core依赖,发现项目中出现了很多jar,这种情况 叫 依赖传递

  8. ubuntu 系统关键指令

    1. 查看系统版本号 cat /etc/issue uname -a cat /proc/version 2. linux 32/64 bit? getconf LONG_BIT 3. dpkg 的命 ...

  9. vscode常用快捷键和插件（持续更新）,以及一些常用设置的坑和技巧

    一 常用快捷键 ctrl+shift+p:  打开命令面板,最常用了 ctrl+p: 搜索窗口: 直接输入文件名,跳转到文件 > 可以进入 Ctrl+Shift+P 模式 ? 列出当前可执行的动 ...

  10. 【转】Python数据类型之“序列概述与基本序列类型(Basic Sequences)”

    [转]Python数据类型之“序列概述与基本序列类型(Basic Sequences)” 序列是指有序的队列,重点在"有序". 一.Python中序列的分类 Python中的序列主 ...