I have a form in a web page dynamically generated and I would like to display it using a the jQuery UI modal dialog.

How can I display the modal dialog form with the remote existing form (myform.html) as content when I click on a link "Open Form"? Clicking on submit button should close the dialog form.

I have a form in a web page dynamically generated and I would like to display it using a the jQuery UI modal dialog.

How can I display the modal dialog form with the remote existing form (myform.html) as content when I click on a link "Open Form"? Clicking on submit button should close the dialog form.

• javascript
• jquery
• forms
• jquery-ui
• web-applications

1 Answer 1

This will load the content of myform.html into the element with ID formContainer, make the formContainer a modal dialog (showing the form). When submitting the form, the dialog will be closed

$("#formContainer").load("myform.html", function() {
    var container = $(this);
    container.dialog({
        modal: true
    })
    .find("form").submit(function() {
        container.dialog("close");
        return false;
    });
});