Как открыть небольшой ящик с веб-страницы, чтобы сделать выбор

Question

Так что я действительно новый с javascript, html и css и в настоящее время в процессе создания игрового веб-приложения. Я бы хотел иметь всплывающее окно, когда вы нажимаете на карту, которая появляется в середине экрана, показывающая параметры, которые вы можете щелкнуть по этой карте (между тем цвета главной страницы становятся темнее), и когда вы выберите один из этих параметров, который он уходит (или если вы щелкнете по всплывающему окну).

Я не уверен, что объясню это очень хорошо, но я даже не знаю, что искать в Интернете, потому что я не знаю, что это называется или даже где начать с этого. Есть идеи?

Answer 1

Сделать DIV в вашем HTML и а:

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

даете Diff цвет фона с помощью RGBA, чтобы включить прозрачность и значение дисплея по умолчанию установлено значение нет, и дать ему ширину 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