Popup a formatted modal dialog and forward when user acknowledges

I need to pop-up a modal dialog with a warning, wait for the warning to be acknowledged and then forward to a constructed url. My current attempt shows the dialog in the window and immediately forwards.

I need each link (button in the example) to be able to pass a parameter to the final url, thus the need to do it in an onclick. The html will be generated from a jsp.

See following for a demo:

<html>
  <head></head>
  <body>
    <div id='container'>
      <input type='button' name='StackOverflow' value='StackOverflow' onClick="Google('StackOverflow')" />
      <br />
      <br />
      <input type='button' name='CodingHorror' value='CodingHorror' onClick="Google('CodingHorror')" />
      <br />
      <br />
    </div>
    <div id="dialog" style="display: none">
      <em>Going to Google</em>
      <hr />
      <ul>
        <li>No guarantee is made that this will work.</li>
        <li>We take no responsibility for the consequences of this action.</li>
      </ul>
    </div>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
    <script>
    function Google(s) { 
        // Replace this.
        //alert("Going to: "+s); 
        // What to do here to popup a formatted dialog in place of the alert, wait for it to be acknowledged and then proceed with the forward.
        // Doesn't work.
        jQuery("#dialog").modal(); 
        window.location='http://www.google.co.uk?as_q='+s; 
    }
    </script>
  </body>
</html>

You will need jQuery and simplemodal.

Solution

Cracked it!! You have to do the forwarding through the onClose.

Note that I am setting the class of my dialog div to simplemodal-close so clicking anywhere in it is considered a close. This is because this is a touch-screen driven tool.

<html>
  <head>
  <style>
    #simplemodal-container {
        background-color:#afafaf; 
        border:solid; 
        padding:12px; 
        cursor:pointer
    }
  </style>
  </head>
  <body>
    <div id='container'>
      <br />
      <br />
      <input type='button' name='StackOverflow' value='StackOverflow' onClick="Google('StackOverflow')" />
      <br />
      <br />
      <input type='button' name='CodingHorror' value='CodingHorror' onClick="Google('CodingHorror')" />
      <br />
      <br />
    </div>
    <div id="dialog" class="simplemodal-close" style="display: none">
      <em>Going to Google</em>
      <hr />
      <ul>
        <li>No guarantee is made that this will work.</li>
        <li>We take no responsibility for the consequences of this action.</li>
      </ul>
    </div>
    <script type='text/javascript' src='js/jquery.js'></script>
    <script type='text/javascript' src='js/jquery.simplemodal.js'></script>
    <script>
    function Google(s) { 
        $.modal($('#dialog'),{
            onClose: function (dialog) {
                window.location='http://www.google.co.uk?as_q='+s;
            }}
        );
    }
    </script>
  </body>
</html>