帶有下拉列表和textarea嵌入的JQuery模態對話框

Question

我是jQuery的新手，請原諒我，如果這是一個簡單的問題。

我正在嘗試從onClick事件創建一個對話框，其中包括：

1）下拉列表2）文本區域（高度可能為300px）3）是/否按鈕

我已經到了可以顯示帶有是/否按鈕的對話框的舞台，但是我正在努力包括下拉列表和textarea字段。

當前代碼：

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.
                }
            } ]
});

}

如果有更好的方法來構建我的對話，我很高興聽到。

謝謝

- 更新--------------------

謝謝 - 這似乎有效，但仍有一些問題。

我已經在body標簽之外創建了div元素，但是，當頁面首次加載時，我可以看到頁面底部的下拉和文本區域。 一旦對話框出現，並且對話框中顯示下拉和文本區域，它們會在點擊“否”后從頁面底部消失（正如我在頁面加載時所預期的那樣）。

我以為是因為我沒有在頁面加載時隱藏div，嘗試使用：

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

雖然它隱藏了PageLoad上的div，但是當對話框出現時，下拉和文本區域仍然是隱藏的。

更新功能：

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：

</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>

Answer 1

您的JavaScript dialog調用很好。 在HTML標記中，在body標記之外，創建一個div元素，用於包裝對話框。 現在在HTML標記中定義了div ，您可以使用append,attr,html調用刪除JavaScript行。

</body>

<div id="dialogDiv" title="Are you sure you want to place this order">
    <!-- Define your textarea and select here as you normally would -->
    <textarea/>
    <select/>
</div>

</html>

使用body標簽之外的HTML，這個div將被隱藏，直到你的dialog方法調用。 您可以處理textarea並select JavaScript代碼中的任何其他HTML元素。

更新：

這是一個JSFiddle的答案： http ： //jsfiddle.net/zMs5n/

$("#dialogDiv").dialog({
    autoOpen: false
});

// Open the dialog when the user clicks some button
$("#myButton").button().click(function() {
    $("#dialogDiv").dialog("open");
});

基本上，您需要在頁面加載后立即創建dialog() 。 作為對話框初始化的一部分，JQuery UI不會在對話框外顯示此div 。 將autoOpen屬性設置為false將阻止打開對話框。 此時，您可以調用對話框open功能，隨意打開對話框。

Answer 2

你必須在dialogDiv div中編寫select和textarea的html代碼。