[英]jQuery UI modal dialog overlay fade out
是否可以在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();
}
});
演示: 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;
});
}
});
我建議不要將疊加層的fadeOut綁定到“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
}
}
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.