今天看到一个纯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. 转 -- pydoc用法

    原文地址: https://www.cnblogs.com/meitian/p/6704488.html pydoc用法 pydoc是python自带的一个文档生成工具,使用pydoc可以很方便的查看 ...

  2. 复选框QCheckBox

    复选框一共有三种状态:全选中.半选中和无选中.若一个父选项的子选项全部为选中状态,则该父选项为全选中:若子选项全部为无选中状态,则该父选项为无选中状态:若子选项既有全选中和无选中状态,则该父选项为半选 ...

  3. luogu P3674 小清新人渣的本愿

    传送门 毒瘤lxl 本质是莫队,关键是怎么处理询问 这里需要开两个bitset(记为\(b1,b2\)),分别存\(x\)和\(n-x\)是否出现 对于询问1,即\(x-y=z\),由于\(y=x-z ...

  4. luogu P3924 康娜的线段树

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

  5. strstr函数字符串匹配问题

    题目链接:http://acm.sdut.edu.cn/onlinejudge2/index.php/Home/Index/problemdetail/pid/2772.html AC代码: #inc ...

  6. JavaScript学习 - 基础(六) - DOM基础操作

    DOM: DOM定义了访问HTML 和XML 文档的标准:1.核心DOM 针对结构化文档的标准模型2.XMK DOM 针对XML文档的标准模型3.HTML DOM 针对HTML文档的标准模型 DOM节 ...

  7. svn使用小技巧

    在使用svn的时候,往往导入到eclipse中,使用eclipse进行提交修改,但是当删除文件夹的时候,eclipse会发生冲突,不能够提交. 使用一种方式,将svn上的项目跟你eclipse对应项目 ...

  8. shell脚本收集服务器基本信息并入库

    # cat check_all.sh #!/bin/bash #create by hexm @2016.6 #date=`date +%Y%m%d` #DIST_FILE=/app/healthch ...

  9. centos7 部署 open-falcon 0.2.1

    =============================================== 2019/4/28_第1次修改                       ccb_warlock 更新 ...

  10. 解决Idea运行testng套件无testoutput文件夹问题

    说明:testNG的工程我是使用eclipse创建的,直接导入到idea中,运行test时不会生产test-output,只能在idea的控制台中查看运行结果,然后到处报告,经过不懈的百度终于找到怎么 ...