Dialog box does not work properly when modal = true

Dialog box does not work properly when modal = true

The goal is to create a modal confirmation dialog box.

The main form has:
  1. A text box, the contents of which will be the message in the dialog box;
  2. A submit button that will display the confirmation dialog box;
  3. Another button that does absolutely nothing.
The dialog box (enclosed in the form) has:
  1. A <div> to store the dynamically generated message;
  2. A submit button that does not do much (the form's action=http://microsoft.com);
  3. Another button to close the dialog box without submitting the form.
The code below works perfectly when dialog option modal = false, but when it is true, the dialog box is grayed out too and the dialog box does not respond to the mouse. It cannot be moved, even if draggable = true. However, the <TAB> key will cycle through the controls on the dialog box and <SPACE> will activate the control. The "Yes" and "No" buttons work as expected. The only problem is that I cannot manipulate the dialog box with the mouse.

  1. <html>
      <head>
        <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
        <title>Main Form</title>
        <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.0/themes/base/jquery-ui.css" />
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript" src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var dlg = $("#dialogbox").dialog({
                    autoOpen: false
                    , width: 300
                    , height: 300
                    , modal: true
            , draggable: true
                    , open: function (event, ui) {
                        $(".ui-dialog-titlebar-close").hide();
                $("#confirmationMessage").html("<h3>" + $("#textbox").val() + "</h3>");
                        $("#dialogno").focus();
                    }
                });

            $("#mainform").append(dlg.parent());
                $("#confirmationMessage").html("<h3>" + $("#textbox").val() + "</h3>");
               
                $("#formbutton").click(function (event) {
                    event.preventDefault();
                    $("#dialogbox").dialog("open");
                });

            $("#dialogno").click(function (event) {
                $("#dialogbox").dialog("close");
                });
            });

            </script>
      </head>
      <body>
        <form method="get" action="http://www.microsoft.com" id="mainform">
               <input type="text" value="test" id="textbox"/>
                <input type="submit" value="formbutton" id="formbutton"/>

               <div id="dialogbox">
              <div id="confirmationMessage">Replace Me Dynamically</div>
              <input type="submit" id="dialogyes" value="dialogyes" />
              <input type="button" id="dialogno" value="dialogno" >
          </form>
      </body>
    </html>