几乎纯css实现弹出框

Posted 2021-11-22 wobeinianqing

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了几乎纯css实现弹出框相关的知识，希望对你有一定的参考价值。

今天需要做一个弹出框，右下角提示的那种，看了一两个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实现弹出框的主要内容，如果未能解决你的问题，请参考以下文章

html5如何实现弹出提示框，并且伴随遮罩层并且可以关闭弹出框

怎样用jquery实现弹出框的弹出时渐渐增大,最小化时渐渐变小的特效，在此先感谢！