css与js相结合之实现弹窗播放的效果

css代码如下

		.container {
			width: 1024px;
			margin: auto;
			border: 1px solid black;
			height: 500px;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			position: relative;
		}

		.vedio {
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.4);
			position: fixed;
			left: 0;
			top: 0;
			display: none;
		}

		.vedio-content {
			width: 60%;
			background: white;
			position: relative;
			top: 25%;
			height: 50%;
			margin: auto;
		}

		.close {
			position: absolute;
			right: 15px;
			top: 10px;
			font-size: 30px;
			cursor: pointer;
		}

JavaScript代码如下

		document.addEventListener('DOMContentLoaded', () => {
			const play = document.getElementById("play");
			const vedio = document.querySelector(".vedio");
			const close = document.querySelector(".close");
			play.addEventListener('click', () => {
				vedio.style.display = 'block'
			})
			close.addEventListener("click", () => {
				vedio.style.display = 'none'
			})
		})

html代码如下

		<div class="container" id="play">
			<svg t="1717482419784" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
				p-id="4257" width="64" height="64">
				<path
					d="M512 1024A512 512 0 1 1 512 0a512 512 0 0 1 0 1024z m3.008-92.992a416 416 0 1 0 0-832 416 416 0 0 0 0 832zM383.232 287.616l384 224.896-384 223.104v-448z"
					fill="#262626" p-id="4258"></path>
			</svg>
		</div>
		//弹窗内容如下，可以根据需要进行内容补充
		<div class="vedio">
			<div class="vedio-content">
				<span class="close">&times;</span>
			</div>
		</div>

实现效果