今天看到一个纯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. JSON与对象的相互转换

    json是一种轻量级的数据格式,(本质为字符串) 低版本可以使用json2.js插件来解决.下载地址:https://github.com/douglascrockford/JSON-js JSON语 ...

  2. text-decoration和text-indent和text-shadow

    text-decoration 属性规定添加到文本的修饰,规定划线的位置. <html> <head> <style type="text/css"& ...

  3. asp.net mvc 中[Authorize]在IE9以上版本关于FormsAuthentication.SetAuthCookie无效的问题 解决方案

    简单的解决方法是,在网站根目录,新增一个浏览器定义文件(browser definition file) 叫“App_Browsers”文件夹,然后里面放一个“IE10.browser”文件即可,网站 ...

  4. sybench压测下模拟误truncate数据恢复

    基本环境:官方社区版MySQL 5.7.21 Row+Gtid开启sysbench压测,使用mysqldump备份数据库,执行truncate操作,恢复数据到truncate前的时间点1.切换日志,记 ...

  5. 访问tp3.2的项目时出现No input file specified.的解决办法

    解决办法很简单如下: 打开.htaccess 在RewriteRule 后面的index.php教程后面添加一个“?” 原来的代码如下 <IfModule mod_rewrite.c> O ...

  6. mysql 案例~mysql主从复制延迟处理(2)

    一 简介:今天来聊聊周期性从库延迟的问题,是上一篇的基础分析的一个场景 二 背景:近期每天的指定时间段,收到从库延迟的报警,然后过一段时间恢复.由于从库是提供读服务的,所以需要解决 三 分析思路: 1 ...

  7. Database学习 - mysql数据类型

    MySQL数据类型 可以被分为3类: 1.整型,数值类型 2.日期和时间类型 3.字符串(字符)类型 整型(INT) 数据类型 大小 M(默认值) 范围(有符号) 范围(无符号) 用途 tinyint ...

  8. Handler使用中可能引发的内存泄漏

    https://my.oschina.net/rengwuxian/blog/181449 http://www.jianshu.com/p/cb9b4b71a820 http://blog.csdn ...

  9. SpringBoot定制错误的Json数据

    (1)自定义异常处理&返回定制Json数据 @ControllerAdvice public class MyExceptionHandler { @ResponseBody @Excepti ...

  10. 【windows核心编程】系统消息与自定义钩子（Hook）使用

    一.HOOk Hook是程序设计中最为灵活多变的技巧之一,在windows下,Hook有两种含义: 1.系统提供的消息Hook机制 2.自定义的Hook编程技巧 其中,由系统提供的消息钩子机制是由一系 ...