Блог

Я пытаюсь использовать настраиваемый переключатель / option button. Он отлично работает с HTML-страницей. Когда я пытаюсь использовать то же самое в модальном окне (модальное окно Featherlight js). Не удается щелкнуть настраиваемый переключатель. Обычный переключатель html работает в модальном окне.

Любое предложение / идея окажут большую помощь,
пожалуйста, проверьте мой код здесь или ниже, нажмите встроенную ссылку в окне результатов, чтобы проанализировать проблему…

 <a href="http://farm5.staticflickr.com/4069/4563624740_93430bb907_b.jpg" data-featherlight>Nice image</a>

<hr>

<a href=".inline" data-featherlight>Inline</a>

<div class="inline">Hello, world<br>
<ul>
  <li>
    <input type="radio" id="f-option" name="selector">
    <label for="f-option">Pizza</label>

    <div class="check"></div>
  </li>

  <li>
    <input type="radio" id="s-option" name="selector">
    <label for="s-option">Boyfriend</label>

    <div class="check"><div class="inside"></div></div>
  </li>

  <li>
    <input type="radio" id="t-option" name="selector">
    <label for="t-option">Cats</label>

    <div class="check"><div class="inside"></div></div>
  </li>
</ul>
</div>

<hr>

<h3>Gallery</h3>
<div data-featherlight-gallery data-featherlight-filter="a">
  <a href="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_b.jpg"><img src="http://farm8.staticflickr.com/7070/6874560581_dc2b407cc0_q.jpg" /></a>
  <a href="http://farm5.staticflickr.com/4005/4400559493_3403152632_o.jpg"><img src="http://farm5.staticflickr.com/4005/4400559493_f652202d1b_q.jpg" /></a>
  <a href="http://farm1.staticflickr.com/174/396673914_be9d1312b1_o.jpg"><img src="http://farm1.staticflickr.com/174/396673914_be9d1312b1_q.jpg" /></a>
</div>
  

CSS:

 .inline { display: none }

ul li{
  color: #AAAAAA;
  display: block;
  position: relative;
  float: left;
  width: 100%;
  height: 100px;
    border-bottom: 1px solid #111111;
}

ul li input[type=radio]{
  position: absolute;
  visibility: hidden;
}

ul li label{
  display: block;
  position: relative;
  font-weight: 300;
  font-size: 1.35em;
  padding: 25px 25px 25px 80px;
  margin: 10px auto;
  height: 30px;
  z-index: 9;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

ul li:hover label{
    color: #ddd;
}

ul li .check{
  display: block;
  position: absolute;
  border: 5px solid #AAAAAA;
  border-radius: 100%;
  height: 25px;
  width: 25px;
  top: 30px;
  left: 20px;
    z-index: 5;
    transition: border .25s linear;
    -webkit-transition: border .25s linear;
}

ul li:hover .check {
  border: 5px solid #ddd;
}

ul li .check::before {
  display: block;
  position: absolute;
    content: '';
  border-radius: 100%;
  height: 15px;
  width: 15px;
  top: 5px;
    left: 5px;
  margin: auto;
    transition: background 0.25s linear;
    -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 5px solid #0DFF92;
}

input[type=radio]:checked ~ .check::before{
  background: #0DFF92;
}

input[type=radio]:checked ~ label{
  color: #0DFF92;
}
  

Это ваша проблема

 ul li input[type=radio]{
   position: absolute;
   visibility: hidden;
}
  

Если вы измените вышеуказанное на:

 ul li input[type=radio]{
   opacity:0;
   left:20px;
   top:30px;
   z-index:10;
}
  

Это эффективно помещает исходный переключатель поверх вашего пользовательского, что делает его интерактивным.