Home/ Questions/Q 8524867
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-11T07:48:32+00:00

I was trying out jquery-overlay-example but with radio buttons. So after the page loads,

  • 0

I was trying out jquery-overlay-example but with radio buttons. So after the page loads, I can make a selection but I cannot change my selection to other option. My code is here:

<!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>

Pardon me if this is a simple question, I am relatively new to JQuery.

Appreciate your help!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Try this – 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);
        }
    });   
});
    • 0