今天需要做一个弹出框，右下角提示的那种 ，看了一两个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. Jenkins构建UI自动化项目，指定本地执行，没弹起浏览显示

    1. 原因分析 为什么执行web没有弹出浏览器,Jenkins日志显示正在执行中 jenkins是用windows installer 安装成 windows的服务了,那么启动windows后jenk ...

  2. pycharm中运行jupyter notebook

    进入anaconda prompt,进入对应的虚拟环境 输入jupyter notebook,找到路径和token 这两个随便复制一个,注意是包括token也要复制到 然后打开pycharm,并建立一 ...

  3. 解决 Xshell 无法使用 zsh 的 prompt style

    为了更好的阅读体验,请点击这里 先学习一下 zsh 的配置吧~ 参考资料 从 0 开始:教你如何配置 zsh powerlevel10k 如何给 Xshell 配置呢 当我安装完 oh-my-zsh. ...

  4. 看李沐的 ViT 串讲

    ViT 概括 论文题目:AN IMAGE IS WORTH 16X16 WORDS: TRANSFORMERS FOR IMAGE RECOGNITION AT SCALE 论文地址:https:// ...

  5. Debian安装Redis服务

    Debian安装Redis服务 安装命令 apt-get update apt-get install redis-server 等待安装完成 配置密码 编辑Redis的配置文件/etc/redis/ ...

  6. 为ssh服务器添加2fa认证，一个python脚本全搞定

    服务器ssh如果被别人登陆就是一场灾难,所以我研究了ssh认证,我发现Google Authenticator PAM可以实现ssh的2fa认证,但是安装和配置比较麻烦.因此我用python实现了ss ...

  7. 攻防世界——CRYPTO新手练习区解题总结<3>(9-12题)

    第九题easychallenge: 下载附件,得到一个后缀为pyc的文件,上网百度一下pyc文件,得知 pyc是一种二进制文件,是由py文件经过编译后,生成的文件,是一种byte code,py文件变 ...

  8. python3求取大文件sha1值和md5

    小文件 import hashlib import base64 filePath = "test.txt" with open(filePath, "rb") ...

  9. UE导入FBX、GLTF模型

    楔子 虽然做了很多年的三维可视化,不过都主要还是web端开发为主(webgl,threejs,有兴趣的读者也可以关注下我的相关专栏).最近准备入手一下UE,顺便做一下知识梳理. 所以文章可能都是比较粗 ...

  10. java面试一日一题：说下mysql中的binlog

    问题:请讲下mysql中的binlog 分析:该问题主要考察对mysql中binlog的理解及使用场景? 回答要点: 主要从以下几点去考虑, 1.什么是binglog? 2.binlog的使用场景是什 ...