今天看到一个纯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. PHP第三方登录—OAuth2.0协议

    第2章 OAuth授权流程详解 

  2. TCP/IP详解 卷1 第十七章 TCP：传输控制协议

    17.2 TCP的服务 TCP提供了一种面向连接的.可靠的字节流服务.两个使用TCP的应用在彼此交换数据之前必须先建立一个TCP连接. TCP通过下列方式来提供可靠性: 1)  应用数据被分割成TCP ...

  3. luogu 1196 银河英雄传说 带权并查集

    带权并查集,其实有点像许多队列问情况的小学奥数 #include<bits/stdc++.h> #define rep(i,x,y) for(register int i=x;i<= ...

  4. QMessageBox消息框

    QMessageBox提供两套接口来实现,一种是static functions(静态方法调用),另外一种 the property-base API(基于属性的API) #需要 from PyQt5 ...

  5. 转载-YARN的内存和CPU配置

    Hadoop YARN同时支持内存和CPU两种资源的调度,本文介绍如何配置YARN对内存和CPU的使用. YARN作为一个资源调度器,应该考虑到集群里面每一台机子的计算资源,然后根据applicati ...

  6. TCP3次握手和4次挥手及其为什么

    TCP 3次握手 客户端向服务器发送一个SYN(包含了SYN,SEQ). 当服务器接收到客户端发过来的SYN时,会向客户端发送一个SYN+ACK的数据包,其实ACK的ack等于上一次发送SYN数据包的 ...

  7. python - 迭代器(迭代协议/可迭代对象)

    迭代器 # 迭代器协议 # 迭代协议:对象必须提供一个next方法,执行该方法要么返回迭代中的下一项,要么就触发一个 StopIteration 异常,以终止迭代(只能往后走不能往前退) # 可迭代对 ...

  8. usbserials

    Rerference: http://blog.csdn.net/qwert12131990/article/details/52403034?locationNum=9

  9. MCS-51单片机存储地址空间划分

    1.前言 MCS-51的存储器有片内RAM.片外RAM 和 ROM 三个空间. MCS-51单片机在物理结构上有四个存储空间 1.片内程序存储器(片内ROM)2.片外程序存储器(片外ROM)3.片内数 ...

  10. Linux内存管理5---物理内存管理

    1.前言 本文所述关于内存管理的系列文章主要是对陈莉君老师所讲述的内存管理知识讲座的整理. 本讲座主要分三个主题展开对内存管理进行讲解:内存管理的硬件基础.虚拟地址空间的管理.物理地址空间的管理. 本 ...