Zub*_*ber 5 jquery modal-dialog jquery-ui-dialog
JQuery Dialog最近给了我很多痛苦.我有以下div我想要弹出.(忽略类没有在语法中显示双引号)
TABLE class=widget-title-table border=0 cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD class=widget-title><SPAN class=widget-title>Basic Info</SPAN></TD>
<TD class=widget-action>
<DIV id=edit-actions jQuery1266325647362="3">
<UL class="linkbutton-menu read-mode">
<LI class="control-actions">
<A id="action-button" class="mouse-over-pointer linkbutton">Delete this stakeholder</A>
<DIV id="confirmation" class="confirmation-dialog title=Confirmation">
Are you sure you want to delete this stakeholder?
</DIV>
</LI></UL></DIV></TD></TR></TBODY></TABLE>
这个JQuery是......
$(document).ready(function() {
$('#confirmation').dialog({
bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
draggable: true, position: 'center', resizable: false, width: 400, height: 150
});
});
对话框是"开放的"
var confirmationBox = $('#confirmation',actionContent);
if (confirmationBox.length > 0) {
//Confirmation Needed
$(confirmationBox).dialog('option', 'buttons', {
'No': function() {
$(this).dialog('close');
},
'Yes': function() {
$('ul.read-mode').hide();
$.post(requestUrl, {}, ActionCallback(context[0], renderFormUrl), 'json');
$(this).dialog('close');
}
});
$(confirmationBox).dialog('open');
}
问题始于初始化本身.加载文档时,<div #confirmation>将从标记中删除!我之前有类似的问题,但我不能在这里使用这个解决方案.在这个页面上,我可以拥有多个PopUp div.
当我在打开之前添加初始化时; 表格弹出.但在我关闭它之后,div被删除了; 所以我再也看不到弹出窗口了.
您看到它删除#confirmation的原因是因为$("#foo").dialog()将#foo从DOM中的任何位置移动到文档底部,这些包装元素会创建最初隐藏的对话框样式.据了解,对话框在打开之前是隐藏的.
好的。我想在你们的帮助下我已经成功了。
我现在知道的一些关于对话框的“自定义”事实（如果我错了，请纠正）：
当 a<div>被初始化为对话框时，它将从其原始位置删除并移动到<body>a 中的元素<div class="ui-dialog">。所以它“自然”地消失了。
要选择对话框，您现在需要一个唯一的标识符。在大多数情况下，它可以是id，也可以是该 div 上的一些其他属性，使其在页面上唯一。
每次初始化对话框时都会创建对话框标记。因此，在 AJAX 调用的情况下，如果启动了现有的对话框，您将多次收到弹出窗口（与重新初始化的次数相同）。为了解决这个问题，我在重新初始化之前删除了现有的对话框标记。我必须这样做，因为我的 AJAX 响应可能有一些需要启动的对话框。
function InitializeConfirmationDialog() {
$('div.confirmation-dialog').each(function() {
var id = $(this).attr("id");
if ($('div.ui-dialog-content[id="' + id + '"]').length > 0) {
$('div.ui-dialog-content[id="' + id + '"]').parents('div.ui-dialog:first').html("").remove();
}
$(this).dialog({
bgiframe: true, modal: true, autoOpen: false, closeOnEscape: false,
draggable: true, position: 'center', resizable: false, width: 400, height: 150
});
});
}