javascript jQuery UI 模态对话框叠加淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12208336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI modal dialog overlay fade out
提问by Alex Jorgenson
Is it possible to apply a fade out effect on the jQuery UI modal dialog box overlay? The issue is that the overlay div is destroyed when the modal dialog box is closed preventing any kind of animation. This is the code I have that would work if the overlay div was not destroyed on close.
是否可以在 jQuery UI 模态对话框叠加层上应用淡出效果？问题是当模态对话框关闭时覆盖 div 被破坏，从而阻止了任何类型的动画。这是我拥有的代码，如果覆盖 div 没有在关闭时被破坏，它将起作用。
$("#edit-dialog-box").dialog(
{
autoOpen: false,
modal: true,
width: "30em",
show: "fade",
hide: "fade",
open: function()
{
$(".ui-widget-overlay").hide().fadeIn();
},
close: function()
{
$(".ui-widget-overlay").fadeOut();
}
});
回答by Danil Speransky
Demo: http://jsfiddle.net/276Ft/2/
演示：http: //jsfiddle.net/276Ft/2/
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
$('.ui-icon-closethick').bind('click.close', function () {
$('.ui-widget-overlay').fadeOut(function () {
$('.ui-icon-closethick').unbind('click.close');
$('.ui-icon-closethick').trigger('click');
});
return false;
});
}
});
?
?
回答by Takit Isy
I advise not to bind the fadeOut of the overlay to the “closethick” close event.
This solution will work in all cases, for example if you use a “Cancel” button, or if the dialog closes itself after doing anything else due to other buttons:
我建议不要将叠加层的淡出绑定到“closethick”关闭事件。
此解决方案适用于所有情况，例如，如果您使用“取消”按钮，或者对话框在由于其他按钮执行任何其他操作后自行关闭：
$('#dialog').dialog({
autoOpen: true,
modal: true,
width: '100px',
height: '100px',
show: 'fade',
hide: 'fade',
open: function () {
$('.ui-widget-overlay', this).hide().fadeIn();
},
beforeClose: function(event, ui){
// Wait for the overlay to be faded out to try to close it again
if($('.ui-widget-overlay').is(":visible")){
$('.ui-widget-overlay').fadeOut(function(){
$('.ui-widget-overlay').hide();
$('.ui-icon-closethick').trigger('click');
});
return false; // Avoid closing
}
}
});
