JQuery Modal de Dialogue avec la liste déroulante et textarea intégré

Je suis nouveau sur jQuery, donc pardonnez-moi si c'est une question facile.

Je suis en train de créer une boîte de dialogue, à partir d'un événement onClick, qui se compose de:

1) Une liste déroulante
2) Une zone de texte (hauteur éventuellement 300px)
3) Oui/Non les boutons

J'en suis arrivé au stade où je peux afficher la boîte de dialogue Oui/Pas de boutons, mais j'ai du mal à comprendre une liste déroulante et champ de type textarea.

Code actuel:

function placeOrder() {

if ($('#dialogDiv').length == 0) {
    $('body').append("<div id='dialogDiv'><div/>");
}

var dialogDiv = $('#dialogDiv');

dialogDiv.attr("Title", "Are you sure you want to place this order.");
dialogDiv.html("Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.");

dialogDiv.dialog({
    modal : true,               
    buttons : [
            {
                text : "Yes",
                class : 'Green',
                click : function() {
                    //Some functionality.                      
                }
            },
            {
                text : "No",
                class : 'Red',
                click : function() {
                    //Some functionality.
                }
            } ]
});

}

Si il ya une meilleure façon de structurer mon dialogue im heureux d'entendre.

Grâce

-- Mise à JOUR --------------------

Grâce - Qui semble avoir du travail mais ils sont encore quelques questions.

J'ai créé l'élément div à l'extérieur de la balise body, pourtant, quand la page se charge tout d'abord, je peux voir la liste déroulante et le texte de la zone au bas de la page. Une fois la boîte de dialogue s'affiche et le menu déroulant de texte et les zones sont affichées dans la boîte de dialogue, pourtant, ils disparaissent à partir du bas de la page (Comme je m'y attendais au chargement de la page) en cliquant sur Non.

Je pensais que c'était parce que je n'avais pas caché la div sur la page de chargement, essayé avec:

$("#dialogDiv").hide(); 

Bien que cache la div sur PageLoad, lorsque la boîte de dialogue s'affiche dans la liste déroulante et le texte de la zone sont encore cachés.

Mise à jour de la fonction:

function placeOrder() {

if ($('#dialogDiv').length == 0) {

}

var dialogDiv = $('#dialogDiv');

dialogDiv.dialog({
modal : true,               
buttons : [
        {
            text : "Yes",
            class : 'Green',
            click : function() {
                //Some functionality.                      
            }
        },
        {
            text : "No",
            class : 'Red',
            click : function() {
                //Some functionality.
            }
        } ]
});

HTML mis à jour:

</body>

    <div id="dialogDiv" title="Are you sure you want to place this order.">
        <p>Are you sure you want to place this order? Please select delivery option from the drop down and enter any special requirements in the text field.</p>
        Reason<select for="postage">
            <option value="">Please select...</option>
            <option value="00111">Fedex - 001</option>
            <option value="00112">UPS - 002</option>
        </select>
        <textarea id="details" name="details" class=" type="text" maxlength="760"></textarea>     
    </div>

OriginalL'auteur Oam Psy | 2013-05-02