点击按钮展示遮罩loading，数据返回后解除loading

好的，这个功能可以通过 JavaScript 和 CSS 来实现。以下是代码示例：

首先，在 HTML 中添加一个包含遮罩和 loading 图片的元素，代码如下：

<div id="overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 999; display: none;">
    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
        <img src="loading.gif" alt="Loading...">
    </div>
</div>

该代码会在当前页面顶层添加一个半透明的遮罩层，并在其中心显示一个 loading 图片，初始状态为隐藏。

然后，在 JavaScript 中添加按钮点击事件监听器，并在其中添加 loading 展示和数据请求逻辑，代码如下：

document.getElementById("button").addEventListener("click", function(){
    // 显示 loading 和遮罩层
    document.getElementById("overlay").style.display = "block";
    // 发送数据请求
    fetch("your_api_url")
        .then(response => response.json())
        .then(data => {
            // 处理数据
            // ...
            // 隐藏 loading 和遮罩层
            document.getElementById("overlay").style.display = "none";
        })
        .catch(error => {
            console.error(error);
            // 隐藏 loading 和遮罩层
            document.getElementById("overlay").style.display = "none";
        });
});

该代码会在按钮被点击时，显示 loading 和遮罩层，然后发送数据请求。当请求返回成功时，会进行数据处理，并隐藏 loading 和遮罩层。如果请求失败，则会输出错误信息，并同样隐藏 loading 和遮罩层。

请注意，您需要将 "button" 替换为您实际使用的按钮 ID，以及将 "your_api_url" 替换为您实际使用的 API 地址。

希望这能帮到您！