jQuery UI模式對話框覆蓋淡出

是否可以在jQuery UI模式對話框覆蓋上應用淡出效果？問題是當模式對話框關閉時，覆蓋div被破壞，從而阻止任何類型的動畫。這是我有這樣的代碼，如果覆蓋div沒有被關閉銷燬。jQuery UI模式對話框覆蓋淡出

$("#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(); 
    } 
});

來源

2012-08-31 Alex Jorgenson

是否在'beforeclose'工作淡出？ –

它似乎沒有工作。 –

演示：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; 
     }); 
    } 
});

來源

2012-08-31 03:04:47

我分叉你的提琴手給覆蓋層一個背景顏色和覆蓋仍然不會淡出。我也試過在我的網站上沒有運氣。編輯：正確的小提琴叉：http://jsfiddle.net/276Ft/ –

對不起。更新後的鏈接：http://jsfiddle.net/276Ft/ –

這真是太棒了，足夠接近我的完美！更新上面的答案，並將其標記爲正確。非常感謝你！ –

我知道這是一個老話題，但...

我寧願不重疊的淡出綁定到「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 
     } 
    } 
});

來源

2018-02-20 13:28:01

jQuery UI模式對話框覆蓋淡出

回答

相關問題