0

我正在尝试jquery-overlay-example但带有单选按钮。因此，页面加载后，我可以进行选择，但无法将选择更改为其他选项。我的代码在这里：

<!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 比较陌生。

感谢你的帮助！

4

1 回答 1

1

试试这个 -演示

$(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-14T14:55:14.797 回答