实现简易开屏弹窗

要实现一个简易的开屏弹窗，并展示一些文章内容，以下是一个简单的HTML和CSS实现。这个弹窗会在页面加载时显示，并包含一个标题和一些文章内容。用户可以点击按钮关闭弹窗，关闭后，弹窗的状态会保存在浏览器的 sessionStorage 中，这样在同一会话期间，页面刷新后不会再显示弹窗。
代码示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>开屏弹窗示例</title><style>/* 设置全局样式 */* {margin: 0;padding: 0;box-sizing: border-box;}/* 弹窗外部遮罩层样式 */.overlay {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */display: none; /* 初始隐藏 */justify-content: center;align-items: center;}/* 弹窗框样式 */.popup {width: 80%;max-width: 600px;background-color: white;border-radius: 20px;padding: 20px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}/* 标题样式 */.popup h1 {font-size: 24px;margin-bottom: 20px;}/* 文章内容样式 */.popup p {font-size: 16px;line-height: 1.6;margin-bottom: 20px;}/* 按钮样式 */.close-btn {display: inline-block;padding: 10px 20px;background-color: #4CAF50;color: white;font-size: 16px;border: none;border-radius: 5px;cursor: pointer;}.close-btn:hover {background-color: #45a049;}</style>
</head>
<body><!-- 遮罩层及弹窗 --><div class="overlay"><div class="popup"><h1>欢迎阅读我们的文章！</h1><p>亲爱的读者，感谢您的光临！我们将为您提供最新的文章内容和游戏资讯。在这篇文章中，我们将讨论关于游戏的一些策略以及如何提高游戏体验。</p><p>本次更新包括对游戏机制的优化和部分英雄的平衡调整，玩家们将能够体验到更加公平和刺激的对战体验。</p><button class="close-btn" onclick="closePopup()">关闭</button></div></div><script>// 获取弹窗和遮罩层元素const overlay = document.querySelector('.overlay');// 关闭弹窗的函数function closePopup() {sessionStorage.setItem('popupClosed', 'true');  // 标记弹窗已关闭overlay.style.display = 'none';  // 隐藏弹窗}// 判断弹窗是否已经关闭if (!sessionStorage.getItem('popupClosed')) {overlay.style.display = 'flex';  // 如果没有关闭，显示弹窗}</script></body>
</html>

代码说明：

HTML 结构：
- overlay：外部遮罩层，覆盖整个页面，具有半透明的黑色背景，用来聚焦弹窗内容。
- popup：弹窗框，包含标题、文章内容和关闭按钮。
- 文章内容放在 <p> 标签中，你可以根据需要编辑文章内容。
CSS 样式：
- overlay 设置为 display: none，初始时不显示弹窗。它通过 flex 布局居中弹窗。
- 弹窗的样式设置了背景色、圆角、阴影和内边距，使其看起来更美观。
- 按钮有简单的样式，点击时会改变背景颜色。
JavaScript 功能：
- closePopup() 函数会在用户点击“关闭”按钮时触发，关闭弹窗并将弹窗状态（popupClosed）存储在 sessionStorage 中。sessionStorage 是浏览器提供的存储机制，它会在页面会话结束时清除数据。
- 页面加载时，如果 sessionStorage 中没有 popupClosed，弹窗就会显示。否则，弹窗会被隐藏。