今天需要做一个弹出框，右下角提示的那种 ，看了一两个jquery的插件 总是不太满意 。一方面js内容太多，另一方面 不太好配合已经存在的样式使用。所以 就自己用css直接实现了下

效果还可以 。

上代码：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="utf-8">

		<title>html5桌面通知</title>

		<style type="text/css">

			.tip {

				border: 1px solid #E8E8E8;

				border-radius: 2%;

				/* background-color: #8D8D8D; */

				position: fixed;

				width: 400px;

				height: 400px;

				right: 20px;

				bottom: -370px;

				-webkit-transition: all 3s;

				-webkit-transform: translate(0, -400px);

			}

			.header{

		        height: 42px;

                line-height: 42px;

                padding: 0 15px;

                border-bottom: 1px solid #E8E8E8;

                color: #333;

                border-radius: 2px 2px 0 0;

                font-size: 14px;

			}

			.card-body{

			    padding: 10px 15px;

                line-height: 24px;

			}

		</style>

	</head>

	<body>

		 <div class="layui-card tip" id="tip">

			<div class="header">

				卡片面板

				<span style="margin-left: 280px;"><a href="javascript:void(0);" onclick="_close()">x</a></span>

			</div>

			<div class="card-body">

				卡片式面板面板通常用于非白色背景色的主体内

				<br>

				从而映衬出边框投影

			</div>

		</div>

	</body>

	<script type="text/javascript">

		function _close(){

			// console.log("123123123");

			document.getElementById("tip").style.cssText = "-webkit-transform: translate(0, 50px);";

		}

	</script>

</html>

　　严格来说只有3行js内容 ，可以说相当精简了。效果如下：

打开以后自动右下角弹出。

点击“x” 后纯css实现 动画下沉效果。

喜欢的朋友可以直接拷贝过去参考下~

几乎纯css实现弹出框的更多相关文章

  1. css实现弹出框

    弹出框也是前端里面经常使用的一个应用场景了,最开始想到的是用js实现这个效果,看到codepen上面有用css实现的.其实就是用到了css里面的一个:target选择器+visibility属性. U ...

  2. CSS自定义弹出框

    <script type="text/javascript" language="javascript"> function sAlert(str) ...

  3. div非弹出框半透明遮罩实现全屏幕遮盖css实现

    IE浏览器下设置元素css背景为透明: background-color: rgb(0, 0, 0); filter: alpha(opacity=20); 非IE浏览器下设置元素css背景为透明: ...

  4. html+css源码之实现登录弹出框遮罩层效果

    在web开发中,很多网站都做了一些特别炫丽的效果,比如用户登录弹框遮罩层效果,本文章向大家介绍css如何实现登录弹出框遮罩层效果,需要的朋友可以参考一下本文章的源代码. html+css实现登录弹出框 ...

  5. css 弹出框

    最近想弄一个类似登陆框的那种弹出框,其实网上已经有很多例子,而且也有相应的插件,例如:jquery-ui的,可直接使用,而我就简单的弄了个简易版的登陆框,真的很简易. 其实原理就是设置两个div,一个 ...

  6. html、css和js原生写一个模态弹出框，顺便解决父元素半透明子元素不透明效果

    模态框: html部分: <!-- 按钮 --> <button id="box" onclick="pop_box()">弹出框< ...

  7. 如何使用纯js实现一个带有灰色半透明背景的弹出框

    原文如何使用纯js实现一个带有灰色半透明背景的弹出框 // 加入透明背景 var body = document.body;var backgroundDiv = document.createEle ...

  8. css超简单实现div页面居中【适合做弹出框】

    1.前言 现在项目中用到弹出框的话大部分都是直接用控件的.不过有控件虽方便,但有时候会有冲突的地方.我上次用layui的弹出框控件,然后也用到了百度的编辑器uEditor,然后一切都好好的,结果编辑赋 ...

  9. bootstrap弹出框提示框无法调用

    使用bootstrap的js插件真的很好用啊有木有!! 但是第一次使用这个弹出框跟提示框的时候就被打击了,没有反应啊!! 然而这并不是一个大问题,一句话搞定,看代码: //首先是工具提示: $(fun ...

  10. Bootstrap-Plugin：弹出框（Popover）插件

    ylbtech-Bootstrap-Plugin:弹出框(Popover)插件 1.返回顶部 1. Bootstrap 弹出框(Popover)插件 弹出框(Popover)与工具提示(Tooltip ...

随机推荐

  1. windows rabbitmq安装

    windows rabbitmq安装1.环境变量,关键是rabbitmq_server需要与erlang版本对应,否则无法使用. rabbitmq下载页https://github.com/rabbi ...

  2. kettle从入门到精通 第七十课 ETL之kettle kettle数据校验，脏数据清洗轻松拿捏

    场景:输入在指定的错误(错误应涵盖数据类型不匹配的情况)行数内,trans不报错,但通过错误处理步骤捕捉,并记入文件,整个数据管线正常完成直至处理完最后一个输入行. 解决方案:使用步骤[数据检验]进行 ...

  3. shell中各个括号的用法区别

    在 shell 脚本中,[ ].[[ ]].( ).(( )).{ } 和 {{ }} 都有各自特定的用法和区别.下面是对这些结构的详细解释: 1. [ ] (test 命令) [ ] 是 shell ...

  4. C#使用RegNotifyChangeKeyValue监听注册表更改的几种方式

    养成一个好习惯,调用 Windows API 之前一定要先看文档 RegNotifyChangeKeyValue 函数 (winreg.h) - Win32 apps | Microsoft Lear ...

  5. T3/A40i支持Linux-5.10新内核啦，Docker、Qt、Python统统升级！

    自2021年创龙科技推出全志国产化率100%的T3/A40i工业核心板后,不到两年时间已超过800家工业客户选择创龙科技T3/A40i平台.随着客户产品的不断升级与迭代,部分"能源电力&qu ...

  6. 使用sqlcel导入数据时出现“a column named '***' already belongs to this datatable”问题的解决办法

    我修改编码为GBK之后,选择导入部分字段,如下: 这样就不会出现之前的问题了,完美 ----------------------------------------------- 但是出现一个问题,我 ...

  7. HDFS的特点和目标，不适合场景

     HDFS的特点和目标: HDFS设计优点: (一)高可靠性:Hadoop按位存储和处理数据的能力值得人们信赖; (二)高扩展性:Hadoop是在可用的计算机集簇间分配数据并完成计算任务的,这些集簇可 ...

  8. Nginx性能调优5招35式不可不知的策略实战

    Nginx是一个高性能的HTTP和反向代理服务器,它在全球范围内被广泛使用,因其高性能.稳定性.丰富的功能以及低资源消耗而受到青睐.今天V哥从5个方面来介绍 Nginx 性能调优的具体策略,希望对兄弟 ...

  9. SQL注入方法

    目录 前言 如何测试与利用注入点 手工 注入思路 工具 sqlmap -r -u -m --level --risk -v -p --threads -batch-smart --os-shell - ...

  10. leetcode简单(数组,字符串,链表)：[66, 67, 70, 83, 121, 141, 160, 169, ,206, 338]

    目录 66. 加一 67. 二进制求和 70. 爬楼梯 83. 删除排序链表中的重复元素 121. 买卖股票的最佳时机 141. 环形链表 160. 相交链表 169. 多数元素 206. 反转链表 ...