网易公开课学习-认识前端，从一个弹窗案例说起

最新推荐文章于 2019-07-04 14:00:25 发布

由此及彼

最新推荐文章于 2019-07-04 14:00:25 发布

阅读量607

点赞数

分类专栏： JSP&Servlet学习笔记

本文链接：https://blog.csdn.net/hxqneuq2012/article/details/51760140

版权

JSP&Servlet学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

你看的到的都是前端工程师开发的。

页面制作：ps切图+html+css

组件化：生产+渠道+用户

页面架构：布局解决方案+响应式+规范与模块化···

产品前端架构：协作流程+技术选型+开发实践

Alert.html源代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>弹窗</title>
	<link rel="stylesheet" type="text/css" href="Alert.css">
</head>
<body>
	<div class="layer" style="display:none">
		<h2>提示</h2>
		<p>认识前端-从一个弹窗案例说起。
		愿有岁月可回首，且以深情共白头。</p>
		<button>ok</button>
	</div>
	<button id="button">点击</button>
	<script type="text/javascript" src="Alert.js"></script>
</body>
</html>

Alert.css源代码：

		*{margin: 0;padding: 0;}
		.layer{
			width: 300px;
			padding: 20px;
			background: #fff;
			border: 1px solid #bbb;
			border-radius: 10px;
			box-shadow: 0 3px 5px #bbb;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.layer h2{
			font-size: 16px;
			border-bottom: 1px solid #ddd;
			padding-bottom: 5px;
			margin-bottom: 20px;
		}
		.layer p{
			font-size: 14px;
			text-indent: 2em;
			line-height: 1.5;
		}
		.layer button{
			display: block;
			width: 100px;
			height: 30px;
			line-height: 30px;
			margin: 30px auto 0;
			text-align: center;
			background: #333;
			color: #fff;
			border: 0;
			border-radius: 5px;
			cursor: pointer;
		}

Alert.jsl源代码：

		document.getElementById("button").addEventListener(
			"click",function(){
				document.querySelector(".layer").style.display="block";
			}
		);
		document.querySelector(".layer button").addEventListener(
			"click",function(){
				document.querySelector(".layer").style.display="none";
			}
		);