js弹出div并显示遮罩层

可以通过以下步骤实现：

1. 创建一个 div 元素作为遮罩层，设置其样式为半透明黑色，宽高设置为100%。

<div id="mask" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999;"></div>

2. 创建一个 div 元素作为弹出框，设置其样式为居中显示在页面上。

<div id="popup" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1000;">
  <!-- 弹出框内容 -->
</div>

3. 使用 JavaScript 控制遮罩层和弹出框的显示和隐藏。

// 显示遮罩层和弹出框
document.getElementById('mask').style.display = 'block';
document.getElementById('popup').style.display = 'block';

// 隐藏遮罩层和弹出框
document.getElementById('mask').style.display = 'none';
document.getElementById('popup').style.display = 'none';

这样就可以实现点击按钮或其他事件触发弹出框的显示，并且页面会被遮罩层覆盖，提高用户体验。