javascript - 如何从网页中打开一个小方框进行选择

Question

所以我对 javascript、html 和 css 真的很陌生，目前正在创建一个游戏网络应用程序。当你点击一张卡片时，我希望能够有一个弹出框出现在屏幕中间，显示你可以点击该卡片的选项(同时主页颜色变暗)以及当你选择其中一个选项它会消失(或者如果您单击弹出窗口)。

我不确定我是否解释得很好，但我什至不知道在网上查找什么，因为我不知道那叫什么，甚至不知道从哪里开始。有什么想法吗？

Answer 1

在你的 html 中创建一个 div 和一个 :

<div id="test"></div>
<div id="card"></div>

使用 rgba 为 diff 设置背景颜色以启用透明度，并将默认显示值设置为 none 并为其提供 100% 的宽度和高度:

#test {
width: 100%;
height: 100%;
display: none;
background-color: rgba(255,255,255,0.6);
}

然后在 javascript 中，您可以在点击时使用事件监听器来触发将显示状态更改为阻塞:

document.getElementById("card").addEventListener("click", function() {
    document.getElementById("test").style.display = "block";
});

这是一个 jsfiddle，您可以查看它:click