js弹出div并显示遮罩层

// 假设你的div和遮罩层已经存在于HTML中，且div的id为'myDiv'，遮罩层的id为'mask'

// 弹出div并显示遮罩层
function showDivWithMask() {
    var div = document.getElementById('myDiv');
    var mask = document.getElementById('mask');

    // 确保div和遮罩层是可见的
    div.style.display = 'block';
    mask.style.display = 'block';

    // 如果需要，可以在这里添加遮罩层的点击事件，用于关闭div和遮罩层
    mask.onclick = function() {
        hideDivAndMask();
    };
}

// 隐藏div和遮罩层
function hideDivAndMask() {
    var div = document.getElementById('myDiv');
    var mask = document.getElementById('mask');

    div.style.display = 'none';
    mask.style.display = 'none';
}

// 调用函数以显示div和遮罩层
showDivWithMask();

这段代码首先定义了两个函数，`showDivWithMask` 用于显示指定的 div 和遮罩层，`hideDivAndMask` 用于隐藏它们。在 `showDivWithMask` 函数中，我们通过改变 `display` 样式属性来控制它们的可见性。同时，为了示例，我们还给遮罩层添加了一个点击事件，当点击遮罩层时，会调用 `hideDivAndMask` 函数来隐藏 div 和遮罩层。最后，通过调用 `showDivWithMask` 函数来显示它们。

请注意，你需要在你的HTML中相应地定义这两个元素，并确保它们的id与JavaScript代码中使用的id相匹配。例如：

<div id="myDiv" style="display:none;">这里是div的内容</div>
<div id="mask" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5);"></div>

上面的HTML代码展示了如何定义一个隐藏的div和一个遮罩层。遮罩层使用了 `fixed` 定位来覆盖整个屏幕，并设置了半透明的背景色。