伪类target实现纯css模态框

今天看到一个纯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模态框的更多相关文章

使用基于关系的选择器和伪类选择器创建纯CSS无JavaScript的鼠标移动到上面即可显示的下拉菜单
html代码: <div class="menu-bar"> <ul> <li> <h3 class="text-warning ...
大神写的一个纯CSS圆角框，膜拜！（支持IE9一下的低版本）
留着提醒自己,底层才是最重要的,不要一直傻瓜的编程下去! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
【IE6的疯狂之八】链接伪类（:hover）CSS背景图片有闪动BUG
IE6下链接伪类(:hover)CSS背景图片有闪动BUG,主要原因ie会再一次请求这张图片,或者说图片没被缓存. 例如: CSS代码 a:hover{background:url(imagepath ...
【转】链接伪类（:hover）CSS背景图片有闪动BUG
来源:http://www.css88.com/archives/744 --------------------------------------------------------------- ...
【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束
引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为 ...
纯css单选框
1.没有用bootstrap时: .has_sel,.un_sel{display:block; width:16px; height: 16px; border: 1px solid #B06A50 ...
好看css搜索框样式_分享8款纯CSS搜索框
最简单实用的CSS3搜索框样式,纯CSS效果无需任何javascript,其中部分搜索框在点击的时候有动画特效,搜索框的应用也是比较普通的,效果如下: 设计网站大全https://www.wode00 ...
纯CSS气泡框实现方法探究
气泡框(或者提示框)是网页中一种很常见的元素,大多用来展示提示信息,如下图所示: 拆分来看,形如这种气泡框无外乎就是一个矩形框+一个指示方向的三角形小箭头,要制作出这样的气泡框,如果解决了三角形小箭头 ...
利用animation和text-shadow纯CSS实现loading点点点的效果
经常在网上看到loading状态时的点点点的动态效果,自己也用JS写了一个,思路是使用一个计数参数,然后在需要添加点的元素后面利用setInterval一个一个加点,当计数到3时,把点变为一个--写完 ...

随机推荐

java先导课程学习总结
经过两个星期四节课的java学习,我也对java这门语言有了一定的认识.刚开始上课的时候,我认为java把C语言中老师所说的模块化编程进行了强调,进行一个类,一个类的编程,在类中构造相应的方法,使用的 ...
static extern
/*主程序在a.c*/ //a.c #include <stdio.h> #include "b.h" main(){ printf ("%d\n" ...
在Mysql中查询两个时间段的差,可以是秒,天,星期,月份,年...
SELECT TIMESTAMPDIFF(SECOND, now(), "2016-11-11 00:00:00") 语法为:TIMESTAMPDIFF(unit,datetime ...
同步sync 异步async
线程中同步任务是串行队列,也就是按顺序执行. 同步任务:不会开辟新的线程,它是在当前线程执行的. dispatch 调度 GCD里面的函数都是以dispatch开头的. 同步任务步骤: 1. ...
ubuntu16.04安装opencv2.4.13
1.更新 sudo apt-get update sudo apt-get upgrade 2.安装关联库 2.1 搭建C/C++编译环境 sudo apt-get install build-ess ...
nodejs 使用http模块保存源码
var xpath=require("xpath"); var fs=require("fs"); var dom = require('xmldom').DO ...
python中对列表的所有操作方法
列表: names = ['a','b','c','d'] 1.追加:names.append() >>> names.append('e') >>> names ...
CSS导航条nav简单样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
PYTHON-UDP
1.TCP 和 UDP 发送数据时的流程 ***** 解释为何TCP是可靠的是因为发送数据后必须收到确认包 2. UDP的模板代码 ***** 1.UDP协议: (数据报协议) 特点: 无连接优 ...
OCM_第十二天课程：Section6 —》数据库性能调优_ 资源管理器/执行计划
注:本文为原著(其内容来自腾科教育培训课堂).阅读本文注意事项如下: 1:所有文章的转载请标注本文出处. 2:本文非本人不得用于商业用途.违者将承当相应法律责任. 3:该系列文章目录列表: 一:&l ...

伪类target实现纯css模态框

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

随机推荐

热门专题