JQuery覆蓋不改變無線電選擇

我試圖用jquery-overlay-example但單選按鈕。因此，在頁面加載後，我可以進行選擇，但我無法將我的選擇更改爲其他選項。我的代碼在這裏：JQuery覆蓋不改變無線電選擇

<!DOCTYPE html> 
<html> 

<head> 
    <title>jQuery Tools standalone demo</title> 

    <!-- include the Tools --> 
    <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> 

    <style> 
    .modal { 
    background-color:#fff; 
    display:none; 
    width:350px; 
    padding:15px; 
    text-align:left; 
    border:2px solid #333; 

    opacity:0.8; 
    -moz-border-radius:6px; 
    -webkit-border-radius:6px; 
    -moz-box-shadow: 0 0 50px #ccc; 
    -webkit-box-shadow: 0 0 50px #ccc; 
    } 

    .modal h2 { 
    margin:0px; 
    padding:10px 0 10px 45px; 
    border-bottom:1px solid #333; 
    font-size:20px; 
    } 
    </style> 
</head> 
<body><!-- the triggers --> 
<p> 

    <input type="radio" name="group1" value="Milk" class="modalInput" rel="#yesno"> Milk<br> 
<input type="radio" name="group1" value="Butter" class="modalInput" rel="#yesno"> Butter<br> 
<input type="radio" name="group1" value="Cheese" class="modalInput" rel="#yesno"> Cheese 
</p> 

<!-- yes/no dialog --> 
<div class="modal" id="yesno"> 
    <h2>This is a modal dialog</h2> 

    <p> 
    You can only interact with elements that are inside this dialog. 
    To close it click a button or use the ESC key. 
    </p> 

    <!-- yes/no buttons --> 
    <p> 
    <button class="close"> Yes </button> 
    <button class="close"> No </button> 
    </p> 
</div> 

<!-- user input dialog --> 
<div class="modal" id="prompt"> 
    <h2>This is a modal dialog</h2> 

    <p> 
    You can only interact with elements that are inside this dialog. 
    To close it click a button or use the ESC key. 
    </p> 

    <!-- input form. you can press enter too --> 
    <form> 
    <input /> 
    <button type="submit"> OK </button> 
    <button type="button" class="close"> Cancel </button> 
    </form> 
    <br /> 

</div> 

<script> 
$(document).ready(function() { 
    var triggers = $(".modalInput").overlay({ 

     // some mask tweaks suitable for modal dialogs 
     mask: { 
     color: '#ebecff', 
     loadSpeed: 200, 
     opacity: 0.9 
     }, 

     closeOnClick: false 
    }); 
    }); 
</script> 
</body> 
</html>

對不起，如果這是一個簡單的問題，我對JQuery來說比較新。

感謝您的幫助！

來源

2012-09-14 javaCity

試試這個 - DEMO

$(document).ready(function() { 
    var triggers = $(".modalInput").overlay({ 
     mask: { 
      color: '#ebecff', 
      loadSpeed: 200, 
      opacity: 0.9 
     }, 

     closeOnClick: false, 

     onClose: function() { 
      this.getTrigger().prop('checked', true); 
     } 
    }); 
});

來源

2012-09-14 14:55:14

真棒！它工作完美。非常感謝您的寶貴時間。 – javaCity

歡迎:) –

JQuery覆蓋不改變無線電選擇

回答

相關問題