Jquery UI模态对话框 [英] Jquery UI modal dialogs
问题描述
这是我的代码：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Transitional // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional .dtd>
< html xmlns =http://www.w3.org/1999/xhtml>
< head>< link type =text / css =Stylesheethref =ui-lightness / jquery-ui-1.8.custom.css/>
< script type =text / javascriptsrc =jquery-1.4.2.min.js>< / script>
< script type =text / javascriptsrc =jquery-ui-1.8.custom.min.js>< / script>
< script type =text / javascript>
函数createDialog（dialogId）{
$（'＃'+ dialogId）.dialog（{
autoOpen：true，
modal：true，
按钮：{
'close'：function（）{
$（this）.dialog（'close'）;
}，
'create'：function（）{
var newDialogId = dialogId +'1';
$（'body'）。append（'< div id ='+ newDialogId +'>'+ newDialogId +'< / div>'）;
createDialog（newDialogId）;
}
}，
close：function（）{
$（this）.dialog（'destroy'）;
$ （this）.remove（）;
}
}）;
}
$（document）.ready（function（）{
$（'＃button1'）。click（function（）{
var dialogId =对话框';
$（'body'）。append（'< div id ='+ dialogId +'>'+ dialogId +'< / div>'）;
createDialog dialogId）;
}）;
}）;
< / script>
< / head>
< body>
< button id =button1>创建对话框< / button>
< / body>
< / html>
重现步骤：
1.通过点击创建一个对话框（对话框）在按钮上
2.通过点击第一个对话框内的创建按钮创建另一个对话框（dialogA）
3.关闭对话框
4.重复步骤2-3
5.第一个对话框的叠加层已经消失了
谢谢
这是我想出来的，因为这显然是一个模态对话框的错误，我可以给你一个可以工作的黑客，但我认为这个原因事实上，当您创建一个模态对话框时，它会添加
< div class =ui-widget-覆盖>< / DIV>
在对话框div上方，由于您将所有对话框直接附加到正文，困惑哪些需要关闭一段时间（这只是我的假设，我真的不应该做）:)
解决方法是检查对话框的数量每次调用CreateDIalog时，都会叠加多个叠加层，如果不匹配，则手动插入一个新的叠加层，可以摆脱您的问题。有一点是，由于这个覆盖图是手动添加的，所以对话框不知道它需要隐藏它，所以当你回到只有一个对话框，并且你关闭它，覆盖停留。这需要手动隐藏。
我知道这不是最好的解决方案，但它是一种解决方法，它适用于我，所以我希望你可以使用它直到有人提出一个更好的解决方案。
这里是代码：
function createDialog（dialogId）{
$（'＃'+ dialogId）.dialog（{
autoOpen：true，
modal：true，
按钮：{
'close'：function（）{
$（this）.dialog（'close'）;
}，
'create'：function（）{
var newDialogId = dialogId +'1';
$（'body'）。append（'< div id =''+ newDialogId +'>'+ newDialogId +'< / div>'）;
createDialog（newDialogId）;
}
}，
close：function（）{
$（this）.dialog（'destroy'）;
$这个）.remove（）;
resetOverlays（）;
}
}）;
var dialogs = $（div.ui-dialog）;
var overlays = $（div.ui-widget-overlay）;
var overlayStyle = $（overlayays [0]）。attr（style）;
if（dialogs.length> overlays.length）
{
var overlay = $（< div>< / div>）addClass -widget-overlay）。attr（style，overlayStyle）.css（z-index，1001）;
$（body）。append（overlay）;
}
}
函数resetOverlays（）
{
var dialogs = $（div.ui-dialog）;
if（dialogs.length == 0）
{
$（。ui-widget-overlay）。
}
}
我添加了对话框和叠加层的检查： p>
var dialogs = $（div.ui-dialog）;
var overlays = $（div.ui-widget-overlay）;
var overlayStyle = $（overlayays [0]）。attr（style）;
if（dialogs.length> overlays.length）
{
var overlay = $（< div>< / div>）addClass -widget-overlay）。attr（style，overlayStyle）.css（z-index，1001）;
$（body）。append（overlay）;
}
其中需要添加额外的叠加层，我添加了一个功能当您不需要它时重新覆盖覆盖层
function resetOverlays（）
{
var dialogs = $（div.ui-dialog）;
if（dialogs.length == 0）
{
$（。ui-widget-overlay）。
}
}
在对话框脚本的关闭部分调用
，close：function（）{
$（this）.dialog（'destroy'）;
$（this）.remove（）;
resetOverlays（）;
}
我没有机会彻底测试，但可能是一个开始，如果没有别的..
祝你好运
I have a problem with Jquery UI modal dialogs. I have modal dialog (dialogA), which can create another modal dialog (dialogB). After the second creation and closure of the dialogB the overlay of dialogA disappear.
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head><link type="text/css" rel="Stylesheet" href="ui-lightness/jquery-ui-1.8.custom.css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript">
function createDialog(dialogId) {
$('#' + dialogId).dialog({
autoOpen: true,
modal: true,
buttons: {
'close': function() {
$(this).dialog('close');
},
'create': function() {
var newDialogId = dialogId + '1';
$('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
createDialog(newDialogId);
}
},
close: function() {
$(this).dialog('destroy');
$(this).remove();
}
});
}
$(document).ready(function() {
$('#button1').click(function() {
var dialogId = 'dialog';
$('body').append('<div id="' + dialogId + '">' + dialogId + '</div>');
createDialog(dialogId);
});
});
</script>
</head>
<body>
<button id="button1">Create dialog</button>
</body>
</html>
Steps to reproduce:
1. create a dialog (dialog) by clicking on the button
2. create another dialog (dialogA) by clicking on the "create" button inside first dialog
3. close dialogA
4. repeat steps 2-3
5. overlay of the first dialog has been disappeared
Thanks
This is what I came up with, since this is obviously a bug with the modal dialog, I can present you with a "hack" that will work, but I think that the reason it messes up is the fact that when you create a modal dialog it adds the
<div class="ui-widget-overlay"></div>
above the dialog div, and since you are appending all of the dialogs directly to the body, it gets confused which ones needs to close after awhile (this is only my assumption, which I really shouldn't be doing) :)
Workaround is to check on the number of dialogs and number of overlays every time CreateDIalog is called, and if they don't match, you manually insert a new overlay which will get rid of your problem. One thing with that is that, since this overlay was added manually, dialog doesn't know that it needs to hide it, so when you are back to only one dialog, and you close it, the overlay stays. That needs to be hidden manually as well.
I know this is not the best solution, but it's a workaround and it worked for me, so I hope you can use it until somebody comes up with a better solution.
here is the code:
function createDialog(dialogId) {
$('#' + dialogId).dialog({
autoOpen: true,
modal: true,
buttons: {
'close': function() {
$(this).dialog('close');
},
'create': function() {
var newDialogId = dialogId + '1';
$('body').append('<div id="' + newDialogId + '">' + newDialogId + '</div>');
createDialog(newDialogId);
}
},
close: function() {
$(this).dialog('destroy');
$(this).remove();
resetOverlays();
}
});
var dialogs = $("div.ui-dialog");
var overlays = $("div.ui-widget-overlay");
var overlayStyle = $(overlays[0]).attr("style");
if(dialogs.length > overlays.length)
{
var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
$("body").append(overlay);
}
}
function resetOverlays()
{
var dialogs = $("div.ui-dialog");
if(dialogs.length == 0)
{
$(".ui-widget-overlay").remove();
}
}
I added the check for dialogs and overlays:
var dialogs = $("div.ui-dialog");
var overlays = $("div.ui-widget-overlay");
var overlayStyle = $(overlays[0]).attr("style");
if(dialogs.length > overlays.length)
{
var overlay = $("<div></div>").addClass("ui-widget-overlay").attr("style", overlayStyle).css("z-index", "1001");
$("body").append(overlay);
}
which takes care of adding an additional overlay when needed, and I added a function for reseting the overlay when you don't need it anymore
function resetOverlays()
{
var dialogs = $("div.ui-dialog");
if(dialogs.length == 0)
{
$(".ui-widget-overlay").remove();
}
}
which is called in the close section of the dialog script
,close: function() {
$(this).dialog('destroy');
$(this).remove();
resetOverlays();
}
I haven't had a chance to test it thoroughly, but it might be a start if nothing else..
good luck
这篇关于Jquery UI模态对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
