当弹出窗口出现时，如何使我的网站背景变灰？

<div id="popup" style="display: none;">
    <!-- 弹出窗口的内容 -->
</div>
<div id="overlay" style="display: none;"></div>
<button onclick="showPopup()">显示弹出窗口</button>

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
    z-index: 999; /* 确保覆盖在其他内容之上 */
    filter: grayscale(100%); /* 使背景变为灰度 */
}

#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000; /* 确保弹出窗口在最上层 */
}

function showPopup() {
    document.getElementById('popup').style.display = 'block';
    document.getElementById('overlay').style.display = 'block';
}

function hidePopup() {
    document.getElementById('popup').style.display = 'none';
    document.getElementById('overlay').style.display = 'none';
}