This example shows some basic features of the modal interface of the Client API.

modal.html

<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.min.js"
            type="text/javascript"></script>
    <script src="/api/ui/htmlClientSdk.js"
            type="text/javascript"></script>
    <script type='text/javascript'>
      function handler(event)
      {
        var choice = $('input[name=heads_or_tails]:checked').val();
        htmlClientSdk.modal.setOptions({title: choice});
        settimeout(function(){htmlClientSdk.modal.close(choice);}, 3000);
      }
    </script>
  </head>
  <body>
    <form name='flip' onSubmit='return handler()'>
      <p><input type='radio' name='heads_or_tails' value='HEADS' />HEADS</p>
      <p><input type='radio' name='heads_or_tails' value='TAILS' />TAILS</p>
      <input type='submit' name='submit' value='Submit' />
    </form>
  </body>
</html>

modal.js

flipper = function(){
  # Select correct answer.
  correct = ['heads', 'tails'][2*Math.random()-1];

  # Create callback function.
  checker = function(choice){
    var correct = htmlClientSdk.modal.getCustomData();
    if (choice === correct) {
      alert('You chose wisely.');
    } else {
      alert('Sorry, you lose.');
    }}

  # Configure modal dialog.
  var config ={
    url: "example/dialog.html",
    title: 'Choose!',
    size: { width: 490, height: 240 },
    onClosed: checker,
    customData: correct}

  # Open modal dialog.
  htmlClientSdk.modal.open(config);
}

# Initialize Javascript API.
$(document).ready(htmlClientSdk.initialize(flipper));