Jquery Modal Dialog disables form elements

Question

Hi, When I set my jQuery dialog to model=true, it disables my form elements inside the dialog and I cannot use them, only the buttons. I have seen examples where the contents of the dialog is declared in the dialog initiation script and then injected. but that is just to bulky for me, I want to be able to create my markup inside the DIV which I turn into a dialog.

Anyone got a solution for me?

My Code:

<form id="form1" runat="server">
<div class="dlg" id="msgDlg">    
    Name: <input type="text"  />
    <br />
    <input type="button" class="button" value="OK" onclick="$('#msgDlg').dialog('close');" />       
</div>
    <script>
        function InitMessageDialog(dialogId) {
            $(function () {
                jQuery("#" + dialogId).dialog({
                    autoOpen: false,
                    modal: false,
                    width: 450,
                    height: 300,
                    draggable: true,
                    resizable: true,
                    zIndex: 99999,
                    overlay: { backgroundColor: "#000", opacity: 0.5 },
                    open: function (type, data) {
                        $(this).parent().appendTo('#form');
                    }
                });
            })
        }
        function GoDialog() {
            var msgDlg = $('#msgDlg').dialog('open');
        }
        InitMessageDialog('msgDlg');
    </script>
    <input type="button" class="button" value="go dialog" onclick="GoDialog()" />
</form>

Answer 1

Assuming markup like so -

<div id="Dialog" style="display:none">
    <form>
      <input id="a"></input>
      <input id="b"></input>
    </form>
</div>

Something like this should work -

$('#dialog').dialog(.dialog({
    modal: true,
    autoOpen: true
})

If you are already doing something similar and having trouble you will have to post sample code.