Dissolvenza in sovrapposizione nella finestra di dialogo modale

Question

Ho una finestra di dialogo dell'interfaccia utente JQuery che è modale e presenta uno sfondo nero con un'opacità del 50%. È possibile rendere l'opacità dello sfondo sfumare dallo 0% al 50%? Se é cosi, come? Perché attualmente sembra un po 'come ottenere un pugno dritto in faccia quando viene mostrata una finestra di dialogo.

FWIW, questo è il CSS che sto utilizzando in questo momento:

.ui-widget-overlay { 
    background: black; 
    opacity: 0.5; 
    filter: alpha(opacity = 50); 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 1

È possibile utilizzare la funzione di jQuery fadeTo(). Ulteriori informazioni possono essere trovate sul link sottostante. http://docs.jquery.com/Effects/fadeTo#speedopacitycallback

Answer 2

Si potrebbe anche aggiungere che questo fadeIn modale:

$(loginForm).dialog({ 
     resizable: false, 
     open: function(){ 
      $('.ui-widget-overlay').hide().fadeIn(); 
     }, 
     show: "fade", 
     hide: "fade" 
}); 

Spero che questo aiuti :)

Answer 3

$('.ui-widget-overlay').hide().fadeIn(); 

Questo effetto ha sul problema IE come l'opacità non funziona dopo la dissolvenza in

Answer 4

So che questa è una domanda vecchia, ma l'ho trovata proprio ora in una ricerca, e sento di poter aiutare le altre persone.

Questo potrebbe essere migliorato, ma sono sicuro che questo farà sbiadire la sovrapposizione quando si utilizza una finestra di dialogo dell'interfaccia utente jQuery.

open: function(){ 
    $('.ui-widget-overlay').hide().fadeIn(); 
}, 
beforeClose: function(){ 
    $('.ui-widget-overlay').remove(); 
    $("<div />", { 
     'class':'ui-widget-overlay' 
    }).css(
     { 
      height: $("body").outerHeight(), 
      width: $("body").outerWidth(), 
      zIndex: 1001 
     } 
    ).appendTo("body").fadeOut(function(){ 
     $(this).remove(); 
    }); 
} 

Answer 5

Solo un piccolo miglioramento della risposta di Liam Potter. Se si desidera che l'overlay sia a schermo intero, è possibile modificare il codice per utilizzare $(document).height() e $(document).width() anziché il corpo, poiché quest'ultimo deve essere misurato più piccolo dell'area visibile.

open: function(){ 
    $('.ui-widget-overlay').hide().fadeIn(); 
}, 
beforeClose: function(){ 
    $('.ui-widget-overlay').remove(); 
    $("<div />", { 
     'class':'ui-widget-overlay' 
    }).css({ 
     height: $(document).height(), 
     width: $(document).width(), 
     zIndex: 1001 
    }).appendTo("body").fadeOut(function(){ 
     $(this).remove(); 
    }); 
} 

Answer 6

Si potrebbe creare il proprio widget di estendere $ .ui.dialog aggiungere Mostra sovrapposizione e nascondere animazioni con configurazione accurata utilizzando l'opzione.

Un'altra funzionalità manca per chiudere la finestra cliccando sulla sovrapposizione è anche facilmente aggiunto:

in qualche file, dicono jquery-ui.fsrc.dialog.js:

(function($, undefined) { 

$.widget('fsrc.fsrc_dialog', $.ui.dialog, { 
open: function() { 
    // some helpful vars 
    var self = this, 
     options = self.options; 

    // call parent method - it will create overlay and save it in self.overlay variable 
    var ret = $.ui.dialog.prototype.open.apply(this, arguments); 

    if (options.showOverlay) { 
     // immediately hide and animate overlay 
     // kind a hack, but jquery ui developers left no better way 
     self.overlay.$el.hide().show(options.showOverlay) 
    } 
    if (options.closeOnOverlay) { 
     // close dialog on click on overlay 
     self.overlay.$el.click(function() { 
      self.close(); 
     }) 
    } 
    return ret; 
}, 
close: function(event) { 
    var self = this, 
     options = self.options; 

    if (options.hideOverlay) { 
     // save and unset self.overlay, so it will not be destroyed by parent function during animation 
     var overlay = self.overlay 
     self.overlay = null; 
     overlay.$el.hide(options.hideOverlay, function() { 
      // destroy overlay after animation as parent would do 
      overlay.destroy(); 
     }) 
    } 

    // call parent method 
    var ret = $.ui.dialog.prototype.close.apply(this, arguments); 
    return ret; 
} 
}); 

}(jQuery)); 

Nella pagina:

<script src='/js/jquery-ui.fsrc.dialog.js' type='text/javascript'></script> 
<script type="text/javascript"> 
<!-- 
    jQuery(document).ready(function(){ 
     jQuery('#show').click(function(){ 
      jQuery('#order_form_container').fsrc_dialog({ 
       modal: true, 
       closeOnOverlay: true, 
       show: {effect: "fade", duration: 500}, 
       showOverlay: {effect: "fade", duration: 500}, 
       hide: {effect: "fade", duration: 300}, 
       hideOverlay: {effect: "fade", duration: 300}, 
      }); 
     }) 
    }) 
--> 
</script>` 

Ho chiamato spazio dei nomi, widget e opzioni a mio favore.

jquery1.7.2 Tested, jquery-ui1.8.19, IE9, FF11, chrome18.0.1025.168m, opera11.61

Answer 7

Si tratta di un'espansione risposta di Liam Potter. Le sue opere sono fantastiche per la dissolvenza, ma non gestiscono la dissolvenza. Ho trovato questo il modo più semplice per rendere lo sfondo anche svanire di nuovo fuori:

beforeClose: function(){ 
    $('.ui-widget-overlay:first') 
     .clone() 
     .appendTo('body') 
     .show() 
     .fadeOut(400, function(){ 
      $(this).remove(); 
     }) 
    ; 
} 

Non si può fare questo nel metodo "vicino", perché jQuery ha già rimosso il contenitore '.ui-widget di-overlay', tuttavia, clonando semplicemente la dissolvenza, è possibile aggirare la rimozione e utilizzare ancora tutti gli stili predefiniti.

Answer 8

Ho dovuto modificare la risposta di Sam Barnes per farlo funzionare (ho anche gettato la funzione di selezione della finestra di dialogo in $ (documento).Funzione pronta):

<script type='text/javascript'> 
    $(".dialog").click(function(){ 
    $('.ui-widget-overlay').hide().fadeIn();   
    $("div.dialog").dialog({ 
     resizable: false, 
     close: function(){ 
      $('.ui-widget-overlay').hide(); 
     }, 
     show: "fade", 
     hide: "fade" 
    }); 
    $(".ui-dialog").fadeIn(); 
    return false; 
    }); 
    $(".ui-widget-overlay").click(function(){ 
    $(this).hide(); 
    $(".ui-dialog").hide(); 
    }); 
</script> 
<style> 
    .ui-widget-overlay { 
    background: black; 
    opacity: 0.5; 
    filter: alpha(opacity = 50); 
    position: absolute; 
    top: 0; 
    left: 0; 
    } 
</style> 
<div class='ui-widget-overlay'></div> 
<div class='dialog' title='Heading!'>Some Message!</div> 

È possibile aggiungere la cosa che si nasconde sul pulsante di fuga stampa aggiungendo:

$(document).keyup(function(e) { 

    if (e.keyCode == 27) { 
     $(".ui-dialog").hide(); 
     $('.ui-widget-overlay').hide(); 
    } 
});