Jquery Featherlight js。カスタマイズされたCSSラジオボタンがモーダルウィンドウで機能しない

Question

カスタマイズされたラジオ/オプションボタンを使用しようとしています。それはHTMLページとうまくいっています。私はモーダルウィンドウ（フェザーライトjsモーダルウィンドウ）で同じものを使用しようとすると。カスタマイズされたラジオボタンをクリックすることができません。 プレーンhtmlラジオボタンがモーダルウィンドウで動作しています。

どれ提案/アイデアは、問題を分析するために、結果ウィンドウ内の私の code here, or below クリックインラインリンクをチェックしてください大きな助け
になります...

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

Answer 1

このあなたの問題です

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

あなたが上記を変更した場合：

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

これは効果的にそれがクリック可能になり、カスタム1の上にオリジナルのラジオボタンを配置します。