[英]JQuery Modal Dialog with drop-down list and textarea embedded
我是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>
您的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
功能,随意打开对话框。
你必须在dialogDiv div中编写select和textarea的html代码。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.