帮我用html 写一个弹窗特效

<!DOCTYPE html>
<html>
<head>
	<title>弹窗特效</title>
	<style type="text/css">
		#overlay {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			display: none;
			z-index: 999;
		}
<pre><code>	#popup {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background-color: #fff;
		padding: 20px;
		border-radius: 5px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
		display: none;
		z-index: 9999;
	}

	.close-btn {
		position: absolute;
		top: 10px;
		right: 10px;
		cursor: pointer;
	}
&lt;/style&gt;
</code></pre>
</head>
<body>
	<button onclick="openPopup()">打开弹窗</button>
<pre><code>&lt;div id=&quot;overlay&quot;&gt;&lt;/div&gt;

&lt;div id=&quot;popup&quot;&gt;
	&lt;div class=&quot;close-btn&quot; onclick=&quot;closePopup()&quot;&gt;x&lt;/div&gt;
	&lt;h2&gt;弹窗标题&lt;/h2&gt;
	&lt;p&gt;弹窗内容&lt;/p&gt;
&lt;/div&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
	function openPopup() {
		document.getElementById(&quot;overlay&quot;).style.display = &quot;block&quot;;
		document.getElementById(&quot;popup&quot;).style.display = &quot;block&quot;;
	}

	function closePopup() {
		document.getElementById(&quot;overlay&quot;).style.display = &quot;none&quot;;
		document.getElementById(&quot;popup&quot;).style.display = &quot;none&quot;;
	}
&lt;/script&gt;
</code></pre>
</body>
</html>