带有下拉列表和textarea嵌入的JQuery模态对话框

时间:2013-05-02 11:34:07

标签: javascript jquery jquery-ui jquery-ui-dialog

我是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>

2 个答案:

答案 0 :(得分:4)

您的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>

如果HTML位于body标记之外,则div将被隐藏,直到您的dialog方法调用为止。您可以像对待JavaScript代码中的任何其他HTML元素一样对待textareaselect

更新:

这是答案的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功能,随意打开对话框。

答案 1 :(得分:0)

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