今天需要做一个弹出框，右下角提示的那种 ，看了一两个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. kettle从入门到精通 第六十九课 ETL之kettle kettle cdc mysql，轻松实现实时增量同步

    1.之前kettle cdc mysql的时候使用的方案是canal+kafka+kettle,今天我们一起学习下使用kettle的插件Debezium直接cdc mysql. 注:CDC (Chan ...

  2. StringUtils.join()方法使用

    * StringUtils.join()方法使用 打印输出: * 使用 StringBuilder 进行拼接:张三,李四,王五 * 使用 StringUtils.join 进行拼接:张三,李四,王五 ...

  3. windows rabbitmq安装

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

  4. Json字符串转换处理html编码格式，= \u003d 处理

    Json字符串转换处理html编码格式,=  \u003d 处理 import com.alibaba.fastjson.annotation.JSONField; import com.faster ...

  5. 第一篇Scrum冲刺博客--原班人马打造队

    0 项目地址 点此进入 1 第一次开会/任务认领 1.1 第一次例会(2024.4.27) 第一次开会照片记录 1.2 开发认领 在查看老师在实验报告中学长的博客给了我一定的启发,我在腾讯表格中创建了 ...

  6. 使用Microsoft.SemanticKernel基于本地运行的Ollama大语言模型实现Agent调用函数

    大语言模型的发展日新月异,记得在去年这个时候,函数调用还是gpt-4的专属.到今年本地运行的大模型无论是推理能力还是文本的输出质量都已经非常接近gpt-4了.而在去年gpt-4尚未发布函数调用时,智能 ...

  7. 【论文阅读】ICRA2022: Panoptic Multi-TSDFs: a Flexible Representation for Online Multi-resolution Volumetric Mapping and Long-term Dynamic Scene Consistency

    Type: ICRA Year: 2022 tag: SLAM 参考与前言 论文链接:https://arxiv.org/abs/2109.10165 代码链接:https://github.com/ ...

  8. 79元国产ARM+DSP平台FFT实测分享

    T113-i国产ARM+DSP架构介绍 创龙科技SOM-TLT113是一款基于国产全志T113-i双核ARM Cortex-A7 +  HiFi4 DSP + 玄铁C906 RISC-V异构多核处理器 ...

  9. Unity中正面视图的相机最大距离定位

    问题背景: Unity中在场景中有这样的需求,就是俯视整个场景或者平视整个场景.这种情况下场景中物体长宽比不一定和相机视口长宽比一致,要保证所有的物体都在视口内,并且距离不能太远,,所以处理起来需要点 ...

  10. redis出现错误提示MISCONF Redis is configured to save RDB snapshots, but is currently not able to persist on disk. Commands that may modify the data set are disabled. Please check Redis logs for......

    某天,redis出现了这样一个错误提示: MISCONF Redis is configured to save RDB snapshots, but is currently not able to ...