[html]
<div class="edit-ma-boite">Click dans ma boite</div>
Notre div conteneur:
<div id="monid" title="Ajouter un truc"></div>

Notre élément HTML s'occupe de faire l'appel au click de notre boite de dialogue. Utilisons la fonction live de jQuery avec un évènement click

[javascript]
$('.edit-ma-boite').live("click",function(){
/*Notre script ici*/
});

Nous devons ensuite configurer l'url dans une variable pour appeler notre boite de dialogue.

[javascript]
var monurl = "/mapage.html";

La fonction load de jQuery va nous aider à charger la boite de dialogue dans notre conteneur avec un ID "#monid". Imaginons que notre page externe "mapage.html" contient un formulaire.

[html]
<form action="" method="post"> 
        <fieldset>
                <table>
                        <tr>
                                <td>
                                        <label for="truc_much">Nom de mon truc:</label>
                                </td>
                                <td>
                                        <input type="text" id="truc_much" name="truc_much" class="ui-widget-content" size="30" value="" />
                                </td>
                        </tr>
                </table>
        </fieldset>
</form>

Notre fonction load:

[javascript]
$("#monid").load(monurl, function() {
//Script pour la boite de dialogue
})

Nous devons désormais configurer notre boite de dialogue ainsi que la requête ajax POST pour notre formulaire et ce avec jquery form.

[javascript]
$(this).dialog({
        height: 'auto',
        width:'auto',
        modal: true,
        position: 'center',
        overlay: {
                backgroundColor: '#000',
                opacity: 0.5
        },
        buttons: {
               'Envoyer': function() {
                $("#monid form").ajaxSubmit({
                        url: monurl,
                        type: "post",
                        error: function(){
                                alert("theres an error with AJAX");
                        },
                        beforeSubmit:function(){},
                        success: function(e){}
                });
                $(this).dialog('close');
                },
                Cancel: function() {
                        $(this).dialog('close');
                }
        }
});

Notre script s'occupe d'ouvrir une boite de dialogue avec un formulaire, et effectue la requête ajax POST de notre formulaire si on click sur le bouton envoyer. Simple mais efficace, a adapter suivant vos besoins mais la pratique reste identique. Notre script jquery complet:

[javascript]
$('.edit-ma-boite').live("click",function(){
                var monurl = "/mapage.html";
                $("#monid").load(monurl, function() {
                        $(this).dialog({
                                height: 'auto',
                                width:'auto',
                                modal: true,
                                position: 'center',
                                overlay: {
                                        backgroundColor: '#000',
                                        opacity: 0.5
                                },
                                buttons: {
                                        'Envoyer': function() {
                                                $("#monid form").ajaxSubmit({
                                                        url: submitcat,
                                                        type: "post",
                                                        error: function(){
                                                                alert("theres an error with AJAX");
                                                        },
                                                        beforeSubmit:function(){},
                                                        success: function(e){}
                                                });
                                                $(this).dialog('close');
                                        },
                                        Cancel: function() {
                                                $(this).dialog('close');
                                        }
                                }
                        });
                });
        });

Je joins un exemple complet sur ce tutoriel avec quelques légère différence sur le nom des ID et class CSS
Télécharger notre exemple de dialog ajax