cesium 弹窗蒙板层

### 创建带遮罩层的弹出窗口 为了在 Cesium 中创建带有遮罩层的弹出窗口，可以利用 HTML 和 CSS 来构建自定义的弹出窗口，并通过 JavaScript 控制其显示与隐藏逻辑。具体来说： #### 1. 构建基本HTML结构 首先，在页面中添加一个用于表示弹窗及其背景遮罩的 div 容器。 ```html <div id="cesiumContainer"></div> <!-- 遮罩 --> <div id="overlay" style="display:none;"></div> <!-- 弹窗 --> <div id="popup" style="display:none;"> <span class="close-btn">&times;</span> <p>这里是弹窗内容</p> </div> ``` #### 2. 添加样式以美化界面并设置遮罩属性 接着为上述元素编写相应的CSS样式来调整布局以及设定遮罩的效果[^1]。 ```css /* 设置全屏黑色半透明遮罩 */ #overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .7); } /* 居中的白色对话框 */ #popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0, 0, 0, .5); z-index: 9999; /* 确保位于最上层 */ } ``` #### 3. 使用JavaScript控制弹窗行为 最后一步是在适当的时候触发这些DOM节点的操作，比如点击按钮打开关闭弹窗等操作。 ```javascript // 获取 DOM 元素引用 const overlay = document.getElementById('overlay'); const popup = document.getElementById('popup'); function openPopup() { // 显示遮罩和弹窗 overlay.style.display = 'block'; popup.style.display = 'block'; // 当用户点击遮罩区域时自动关闭弹窗 overlay.addEventListener('click', closePopup); // 关闭按钮事件监听 const closeButton = popup.querySelector('.close-btn'); closeButton.addEventListener('click', closePopup); } function closePopup(event) { event.stopPropagation(); // 停止冒泡防止误触其他地方也关闭 // 移除之前绑定过的事件以防重复注册 overlay.removeEventListener('click', closePopup); // 隐藏遮罩和弹窗 overlay.style.display = 'none'; popup.style.display = 'none'; } ``` 以上方法可以在不依赖任何第三方库的情况下轻松实现在Cesium应用内展示具有遮罩效果的弹出窗口功能。