title: How to use jQuery overlay to get radio buttons to the popup window?
body: <p>I am following this tutorial and designed and alert window(including online demo),<br>
  <a href="http://jquerytools.org/demos/overlay/modal-dialog.html" rel="nofollow">http://jquerytools.org/demos/overlay/modal-dialog.html</a></p>
  
  <p>I could modify the source code and <strong>added radio buttons to the alert message</strong>.Source code is given bellow(you don't have to go through the whole code.Just see the place where I have added radio buttons and place where I access the value of the radio button),</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;!--
     This is a jQuery Tools standalone demo. Feel free to copy/paste.
     http://flowplayer.org/tools/demos/
  
     Do *not* reference CSS files and images from flowplayer.org when in
     production Enjoy!
  --&gt;
  &lt;head&gt;
    &lt;title&gt;jQuery Tools standalone demo&lt;/title&gt;
  
      &lt;!-- include the Tools --&gt;
    &lt;script src="jquery.tools.min.js"&gt;&lt;/script&gt;
  
    &lt;!-- standalone page styling (can be removed) --&gt;
    &lt;link rel="shortcut icon" href="/media/img/favicon.ico"&gt;
    &lt;link rel="stylesheet" type="text/css"
          href="/media/css/standalone.css"/&gt;
  
    &lt;style&gt;
      .modal {
      background-color:#fff;
      display:none;
      width:350px;
      height:250px;
      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 {
      background:url(/media/img/global/info.png) 0 50% no-repeat;
      margin:0px;
      padding:10px 0 10px 45px;
      border-bottom:1px solid #333;
      font-size:20px;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;!-- the triggers --&gt;
  &lt;p&gt;
    &lt;button class="modalInput" rel="#yesno"&gt;Yes or no?&lt;/button&gt;
    &lt;button class="modalInput" rel="#prompt"&gt;User input&lt;/button&gt;
  &lt;/p&gt;
  
  &lt;!-- yes/no dialog --&gt;
  &lt;div class="modal" id="yesno"&gt;
    &lt;h2&gt;This is a modal dialog&lt;/h2&gt;
  
    &lt;p&gt;
      You can only interact with elements that are inside this dialog.
      To close it click a button or use the ESC key.
    &lt;/p&gt;
  
    &lt;!-- yes/no buttons --&gt;
    &lt;p&gt;
      &lt;button class="close"&gt; Yes &lt;/button&gt;
      &lt;button class="close"&gt; No &lt;/button&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  
  
  
  &lt;!-- user input dialog --&gt;
  &lt;div class="modal" id="prompt"&gt;
    &lt;h2&gt;This is a modal dialog&lt;/h2&gt;
  
    &lt;p&gt;
      You can only interact.
    &lt;/p&gt;
  
    &lt;!-- input form. you can press enter too --&gt;
    &lt;form&gt;
      //Added radio buttons
      &lt;input type="radio" name="sex" value="male" id="male"&gt; Male&lt;br /&gt;
      &lt;input type="radio" name="sex" value="female" id="female"&gt; Female&lt;br /&gt;
  
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
  
    &lt;/form&gt;
    &lt;br /&gt;
  
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
      var triggers = $(".modalInput").overlay({
  
        // some mask tweaks suitable for modal dialogs
        mask: {
          color: '#ebecff',
          loadSpeed: 200,
          opacity: 0.9
        },
  
        closeOnClick: false
    });
  
      var buttons = $("#yesno button").click(function(e) {
  
        // get user input
        var yes = buttons.index(this) === 0;
  
        // do something with the answer
        triggers.eq(0).html("You clicked " + (yes ? "yes" : "no"));
    });
  
      $("#prompt form").submit(function(e) {
  
        // close the overlay
        triggers.eq(1).overlay().close();
  
        // get user input
        var input = $("input", this).val(); // this input value always return 'male' as the output  
  
  
  
        // do something with the answer
        triggers.eq(1).html(input);
  
        // do not submit the form
        return e.preventDefault();
    });
    });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>This demo has two alert windows. I am talking about the alert message which has the text input.In my example I have remove text input and added two radio buttons.</strong><br/><br/>
  <strong>But when I click the 'submit' button It always return me 'male' as the output</strong><br/>
  Can anyone please help me to solve this problem? I need to get the output of the radin buttons to variable 'input'</p>