Jquery Featherlight js自定义CSS单选按钮不工作在模态窗口

我试图使用自定义的单选/选项按钮。它的工作很好与html页面。当我尝试在模态窗口(Feather light 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>

.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;
}