Finestra di dialogo Modale JQuery senza sovrapposizione

Question

Sto tentando di mostrare una "finestra di dialogo caricatore Ajax" che blocca l'interfaccia (modale) ma non ha sovrapposizione.

Questo è come mi inizializzare la finestra di dialogo:

$("<div></div>").dialog({ 
     modal: true, 
     dialogClass: "noOverlayDialog", 
     autoOpen: false, //opened later 
     ... 
    }); 

ho aggiunto il seguente CSS per nascondere la sovrapposizione:

.ui-dialog.noOverlayDialog + .ui-widget-overlay { opacity: 0 !important; } 

Tuttavia, quando chiamo dialog("open") la sovrapposizione lampeggia poi scompare, come se L'ho nascosto usando Javascript. Stesso effetto con display:none; o visibility:hidden.

Per assicurarsi che fosse il css a rimuovere l'overlay e non qualcos'altro, ho rimosso la riga di css e sicuramente l'overlay era ora sempre visibile.

Perché sta succedendo? Ho pensato che i CSS statici non dovessero avere questo tipo di comportamento e l'overlay dovrebbe essere nascosto immediatamente senza flash.

Se non riesco a trovare una soluzione intuitiva, forse un'alternativa sarebbe quella di impostare l'opzione modale su false per impedire che l'overlay si sovrapposti, e quindi scrivere il codice per ottenere il comportamento modale. Ad ogni modo, ho bisogno di una soluzione funzionante.

Answer 1

Ho la sensazione che ciò che state vedendo è l'immagine di sovrapposizione rendering in background brevemente prima l'effetto di trasparenza (non supportato in tutti i browser, tra l'altro) è in grado di calciare in.

.ui-widget-overlay { background: none !important; } 

È possibile che questo dovrebbe funzionare. Come già detto in precedenza, tuttavia, un esempio pubblicato sul proprio server o JSFiddle consentirebbe una diagnosi più specifica.

Answer 2

Ho capito che funziona su jsFiddle. Try this link

<div id="dialog"> 
    <h3>Here is the dialog content</h3> 
    <p id="dialogContent"></p> 
</div> 
<button onclick="$('#dialog').dialog('open');">open</button> 

<script> 
    $(document).ready(function(){ 
     $('#dialog').dialog({ 
      title: 'My dialog', 
      dialogClass: "noOverlayDialog", 
      autoOpen:false, 
      modal: true, 
      open: function(event,ui){ 
       $('.noOverlayDialog').next('div').css({'opacity':0.0}); 
      } 
     }); 
    }); 
</script> 

Answer 3

La sovrapposizione utilizzata da jQuery ha classe ui-widget-overlay. Così Includere la regola CSS qui sotto nella tua css,

.ui-widget-overlay { 
    opacity: 0; 
    filter: alpha(opacity=0); /* IE8 and lower */ 
} 

DEMO:http://jsfiddle.net/Lhwsq/

Nota:

1. Assicurarsi che questa regola è incluso dopo jQuery CSS o qualsiasi altro plug-in css.
2. Questo stile verrà applicato a qualsiasi finestra di dialogo nella stessa pagina.

per farlo funzionare su qualsiasi finestra specifica vedere https://stackoverflow.com/a/14586175/297641

Answer 4

Una possibilità sarebbe la creazione di una classe aggiuntiva overlay-hidden e aggiungendolo alla sovrapposizione quando la finestra è opened, rimuovendo di nuovo quando è closed.Che garantiranno altre finestre di dialogo nella pagina (che può richiedere una sovrapposizione visibile) continuare a lavorare correttamente:

open: function(event,ui){ 
    $('.ui-widget-overlay').addClass('overlay-hidden'); 
}, 
beforeClose: function(event,ui){ 
    $('.ui-widget-overlay').removeClass('overlay-hidden'); 
} 

La classe overlay-hidden si sovrappone opacity-0, come suggested da @Vega:

.overlay-hidden { 
    opacity: 0.0; 
    filter: alpha(opacity=0); /* IE8 and lower */ 
} 

Working example su jsFiddle (adattato da @ ShadeTreeDeveloper's answer).

Answer 5

Nessuna delle risposte di seguito ha funzionato per me, ma alla fine ho trovato la soluzione.

Si scopre la finestra è inizialmente reso all'interno di un contenitore chiamato .ui-effects-wrapper con l'overlay seguente il contenitore non la finestra di dialogo:

<div class="ui-effects-wrapper" ... > 
    <div class="ui-dialog" .... > 
    </div> 
</div> 
<div class="ui-widget-overlay" ...> </div> 

Perciò il mio selettore .ui-dialog.noOverlayDialog + .ui-widget-overlay sarebbe solo entrare in vigore dopo che il contenitore è stato rimosso gli effetti. Per risolvere il problema, dovevo scegliere come target entrambi i selettori:

.ui-dialog.noOverlayDialog + .ui-widget-overlay, 
.ui-effects-wrapper + .ui-widget-overlay { 
     background: none !important; 
     opacity: 0 !important; 
} 

Nota: il secondo selettore è globale.