Подскажите пожалуйста, есть такой код в котором содержатся input radio и всплывающие окно:
#donate {
margin:4px;
width:100%;
float:left;
height:10%;
}
#donate label {
float:left;
width:30%;
margin:4px;
background-color:#EFEFEF;
border-radius:5px;
border:2px dashed #777;
cursor:pointer;
height:30px;
}
#donate label span {
text-align:center;
font-size: 16px;
padding:5px 0px;
display:block;
}
#donate label input {
position:absolute;
top:-20px;
}
#donate input:checked + span {
background-color:#404040;
color:#F7F7F7;
border-radius:5px;
}
#donate .yellow {
background-color:#edc951;
color:white;
}
#zatemnenie {
background: rgba(102, 102, 102, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
display: none;
}
#okno {
width: 300px;
height: 50px;
text-align: center;
padding: 15px;
border: 3px solid #0000cc;
border-radius: 10px;
color: #0000cc;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
background: #fff;
}
#zatemnenie:target {display: block;}
.close {
display: inline-block;
border: 1px solid #0000cc;
color: #0000cc;
padding: 0 12px;
margin: 10px;
text-decoration: none;
background: #f2f2f2;
font-size: 14pt;
cursor:pointer;
}
.close:hover {background: #e6e6ff;}
<div id="donate">
<label class="yellow"><input type="radio" name="sposob"><span>Стол</a></span></label>
<label class="yellow"><input type="radio" name="sposob"><span>На вынос</span></label>
<label class="yellow"><input type="radio" name="sposob"><span>Доставка</span></label>
</div>
<div id="zatemnenie">
<div id="okno">
Всплывающее окошко!<br>
<a href="#" class="close">Закрыть окно</a>
</div>
</div>
<a href="#zatemnenie">Всплывающее окно</a>
:target
- это вообще финиш, могли бы на chekcbox'e сделать.