0

Подскажите пожалуйста, есть такой код в котором содержатся 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>
Как можно совместить всплывающие окно и input radio? Что бы при нажатии на "Стол" открывалось всплывающие окно.

4
  • Есть, но его надо написать. JavaScript вам нужен также для этой задачи. Гляньте в сторону событий к примеру
    – user262779
    16 янв 2019 в 12:13
  • Я конечно понимаю, что html+css легче в освоении, но завязывайте с этим - используйте js для таких задач. :target - это вообще финиш, могли бы на chekcbox'e сделать. 16 янв 2019 в 12:14
  • @L.F.C. есть ссылкочки на примеры? 16 янв 2019 в 12:16
  • learn.javascript.ru/introduction-browser-events
    – user262779
    16 янв 2019 в 12:17

1 ответ 1

0

#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" onclick="location.href = '#zatemnenie';"><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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.