2

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

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

1) 下拉列表 2) 文本区域（高度可能为 300 像素） 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>
4

2 回答 2

5

您的 JavaScriptdialog调用很好。在您的 HTML 标记中，在body标签之外，创建一个div将包装您的对话框的元素。现在div在 HTML 标记中定义后，您可以删除带有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方法调用。您可以像对待 JavaScript 代码中的任何其他 HTML 元素一样对待textareaand 。select

更新：

这是答案的 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函数，随意打开对话框。

于 2013-05-02T11:38:56.303 回答
0

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

于 2013-05-02T11:39:01.437 回答