简易弹窗制作

简介

在实现增删改查等其他功能时，可以用js设置监听点击事件，给相应的按钮添加对应的功能，而弹窗的设置会使页面呈现更加美观，尤其是增加和修改数据，用弹窗表单更加方便。

创建简易弹窗

HTML部分

<div class="popup">
			<div class="popup-content">
				<!-- 比如说学生信息的相关弹窗-->
				<!-- 设置取消按钮 -->
				<span class="close">&times;</span>
				<input type="text" id="studentId" placeholder="学号"/>
				<input type="text" id="name" placeholder="学生姓名"/>
				<input type="text" id="grade" placeholder="学生成绩"/>
				<input type="text" id="classroom" placeholder="班级"/>
				<button id="submit">提交</button>
			</div>
		</div>

css部分

*{
		padding: 0;
		margin: 0;
	}
	.popup{
		position: fixed; /* 固定定位，覆盖整个视口 */
		z-index: 1; /* 确保弹窗位于其他内容之上 */
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow:hidden;
		background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
	}
	.popup-content{
		background-color: #fefefe; /* 白色背景 */
		margin: 15% auto; /* 将弹窗内容框置于视口中央 */
		padding: 20px;
		border: 1px solid #888;
		width: 80%; /* 弹窗内容框宽度 */
	}
	 input[type="text"] {
	    width: 100%;
	    padding: 12px 20px;
	    margin: 8px 0;
		outline: none;
	    box-sizing: border-box;
	    border: 1px solid #ccc;
	    border-radius: 4px;
	  }
	  /* 取消按钮 */
	  .close{
		color: #aaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
	  }
	  .close:hover,
	  .close:focus {
		color: black;
		text-decoration: none;
		cursor: pointer;
	  }
	  #submit{
		background-color: #4caf50;
		color: white;
		padding: 14px 20px;
		margin: 8px 0;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	  }

js部分

    var close=document.querySelector('.close');
	var popup=document.querySelector('.popup');
	close.addEventListener('click', function() {
	  popup.style.display = 'none';
	});
	// 点击黑色背景也能隐藏弹窗
	window.addEventListener('click', function(event) {
	  if (event.target === popup) {
	    popup.style.display = 'none';
	  }
	});

总结

创建弹窗时，在HTML中创建弹窗的样式，黑色透明的背景，弹框内容放于中央
实现弹窗显示或者隐藏功能时，获取相关取消按钮等，设置display属性控制。同时，对于一套完整的增删改查功能来说，应该灵活变通，根据具体的实现情况调整代码，本文主要讲的就是基础性的弹窗怎样制作和它的显示隐藏。

零碎额外知识点

classList

可以添加，切换，删除，检查元素的类名
元素.classList.add(‘类名’)；
可以添加一个或多个类名，中间用逗号隔开

preventDefault

是一个js方法，常用于阻止事件的默认行为
通常用于事件处理函数中，阻止事件的默认行为发生，从而实现自定义的操作

textContent

可以获取隐藏标签的纯文本，即设置style="display:none"属性标签的文本
直接输出不换行的纯文本，所有文本输出都在同一行
设置文本的内容
获取文本内容

parentElement

获取对象层次中的父对象

appendChild

可向节点的子节点列表末尾添加新的子节点

forEach

是一个数组方法，用于遍历数组中的每个元素，并对每个元素执行指定的操作

document.creatElement()

在对象中创建一个对象，要与appendChild（）方法联合使用