JQuery覆盖不更改单选选项

JQuery overlay not changing radio selection

本文关键字：单选 选项 覆盖 JQuery      更新时间：2023-09-26

我尝试了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还比较陌生。

感谢你的帮助！

试试这个-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);
        }
    });   
});
相关文章：