Javascript 嵌入下拉列表和文本区域的JQuery模态对话框

我是jQuery新手，所以如果这是一个简单的问题，请原谅我

我正在尝试从onClick事件创建一个对话框，其中包括：

1下拉列表 2 A文本区域高度可能为300px 3个是/否按钮

我已经到了可以显示带有Yes/No按钮的对话框的阶段，但是我很难包含一个下拉列表和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.
                }
            } ]
});

尽管这会隐藏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>

您的JavaScript对话框调用正常。在HTML标记中，在body标记之外，创建一个将包装对话框的div元素。现在在HTML标记中定义了div，您可以通过append、attr、HTML调用删除JavaScript行

---

基本上，您需要在页面加载后立即创建对话框。作为对话框初始化的一部分，jqueryui将不会在对话框外部显示此div。将autoOpen属性设置为false将阻止对话框打开。此时，您可以调用dialog open函数在空闲时打开对话框。

您必须在dialogDiv中编写select和textarea的html代码。

谢谢。这似乎有作用，但仍有一些问题。我已经在body标记之外创建了div元素，但是，当页面第一次加载时，我可以看到页面底部的下拉列表和文本区域。一旦对话框出现，下拉列表和文本区域显示在对话框中，它们就会从页面底部消失，正如我在页面加载时预期的那样。我认为这是因为我没有在页面加载时隐藏div，尝试使用$dialogDiv.hide；虽然这会隐藏div，但是当对话框出现时，下拉列表和文本区域仍然隐藏。如果解决了您的问题，请不要忘记接受此答案。谢谢分享答案。JSFiddler确实帮助理解了实现。谢谢。这似乎有作用，但仍有一些问题。我已经在body标记之外创建了div元素，但是，当页面第一次加载时，我可以看到页面底部的下拉列表和文本区域。一旦对话框出现，下拉列表和文本区域显示在对话框中，它们就会从页面底部消失，正如我在页面加载时所期望的那样。我认为这是因为我没有在页面加载时隐藏div，尝试使用$dialogDiv.hide；尽管这隐藏了div，但是当对话框出现时，下拉列表和文本区域仍然隐藏。

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

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

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

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