jQuery追加/向jQuery对话框添加隐藏的div [英] jQuery Append/Add Hidden div to jQuery Dialog
本文介绍了jQuery追加/向jQuery对话框添加隐藏的div的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试将HTML文件中的div元素添加/添加到对话框(当前有一些按钮). div在页面加载时通过CSS类隐藏"隐藏
I'm trying to append/add a div element within my HTML file to a dialog box (which currently has some buttons). The div is hidden on page load with a CSS class 'hide'
HTML DIV:
<section>
<div id="deliveryMethod" title="Delivery Method" class="hide">
<p>Please select delivery method and special requirements.</p>
<ul>
<li>
<label>Method:</label>
</li>
<li>
<div>
<select for="deliveryService">
<option value="">Please select...</option>
<option value="FedEx">FedEx</option>
<option value="UPS">UPS</option>
</select>
</div>
</li>
<li>
<label>Special Requirements:</label>
</li>
<li>
<textarea id="specialRequirements" type="text" value="" maxlength="220"></textarea>
</li>
</ul>
</div>
</section>
class的CSS =隐藏
.hide {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
单击按钮时的jQuery,在我调用的函数下面:
function deliveryServiceClick() {
$("#dialogDiv").dialog("open");
if ($('#dialogDiv').length == 0) {
$('body').append("<div id='dialogDiv'><div/>");
}
var dialogDiv = $('#dialogDiv');
dialogDiv.attr("Title", "Please select your chosen delivery service.");
dialogDiv.html("<div id='deliveryMethod'><div/>");
$('body').append("<div id='deliveryMethod'><div/>");
dialogDiv.dialog({
modal : true,
buttons : [
{
text : "Process",
class : 'large',
click : function() {
//
}
},
{
text : "Cancel",
class : 'large',
click : function() {
$(this).dialog('close');
}
} ]
});
}
如您所见,我试图使用以下内容来添加/显示隐藏的div:
As you can see, i have tried to append/show my hidden div using:
dialogDiv.html("<div id='deliveryMethod'><div/>");
$('body').append("<div id='deliveryMethod'><div/>");
然后,在jQuery中定义的按钮将显示在div下方.
The buttons defined in my jQuery would then appear below the div.
任何帮助将不胜感激.
谢谢
推荐答案
尝试
function deliveryServiceClick() {
var dialogDiv = $('#dialogDiv');
$("#dialogDiv").dialog("open");
if (dialogDiv.length == 0) {
dialogDiv = $("<div id='dialogDiv'><div/>").appendTo('body');
$('#deliveryMethod').appendTo(dialogDiv).removeClass('hide')
dialogDiv.attr("Title", "Please select your chosen delivery service.");
dialogDiv.dialog({
modal : true,
buttons : [
{
text : "Process",
class : 'large',
click : function() {
//
}
},
{
text : "Cancel",
class : 'large',
click : function() {
$(this).dialog('close');
}
} ]
});
}else{
dialogDiv.dialog("open");
}
}
演示:小提琴
这篇关于jQuery追加/向jQuery对话框添加隐藏的div的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文