contenuti DIV mostra sulla pagina invece di JQuery Dialog

Question

Ho il seguente DIV markup:

<div id="dialog" title="Membership Renewal"> 
Your membership is going to expire. 
</div> 

Ho il seguente javascript per eseguire la JQuery:

<script type="text/javascript"> 
function showjQueryDialog() { 
    $("#dialog").dialog("open"); 
    //alert("Time to renew Membership!"); 
} 

$(document).ready(function() { 
    $("#dialog").dialog({ 
     autoOpen: false, 
     modal: true, 
     buttons: { "Renew Membership": function() { $(this).dialog("close"); } } 
    }); 
}); 
</script> 

ho un asp: Button che si trova all'interno di un controllo e il controllo si trova su una pagina principale. La prima cosa che noto è che quando la pagina viene caricata, viene visualizzato il div e poi scompare quando la pagina viene caricata. Quando clicco il bottone esegue il seguente:

if (timeSpan.Days >= 30) 
{ 
//Show JQuery Dialog Here 
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "showExpiration",  
"showjQueryDialog()", true); 
} 

quando clicco sul tasto, invece di una finestra di dialogo popping up, il contenuto del div diventa appena visibile.

Answer 1

Credo che tu abbia due problemi correlati qui.

Il motivo per cui il DIV viene visualizzato quando si carica per la prima volta è perché non lo si è ancora avvertito. Lo script jQuery che rende il comportamento DIV come una finestra di dialogo non viene eseguito finché non viene caricato il DOM HTML e fino a quel momento non verrà nascosto il DIV. Una soluzione semplice consiste nel nascondere il DIV per impostazione predefinita tramite CSS.

<div id="dialog" title="Membership Renewal" style="display:none;"> 
Your membership is going to expire. 
</div> 

Il problema click pulsante è connessi: RegisterClientScriptBlock uscita volontà di uno script che viene eseguito non appena si incontra, in modo che il codice jQuery che lo trasforma in una finestra di dialogo non ha avuto la possibilità di correre ancora. Per dargli la possibilità di farlo, puoi cambiare il codice C# per usare RegisterStartupScript, che ritarderà l'esecuzione di showjQueryDialog() fino al termine del caricamento della pagina e il codice jQuery ha avuto la possibilità di convertire il DIV in una finestra di dialogo.

if (timeSpan.Days >= 30) 
{ 
    //Show JQuery Dialog Here 
    ScriptManager.RegisterStartupScript(this, typeof(Page), 
     "showExpiration", "showjQueryDialog()", true); 
} 

Answer 2

assicurati di specificare il doctype corretto nella parte superiore della pagina, questa sembra essere la causa di alcuni problemi che ho visto.

edit:

anche, per evitare che si lampeggiare, all'inizio si può avere qualcosa di simile

#debug { display: none; } 

da qualche parte prima che l'elemento (molto probabilmente il vostro foglio di stile o nella testa).

un'altra cosa che potrebbe aiutare è se si mette insieme:

OnClientClick="showjQueryDialog(); return false;"; 

nel caricamento della pagina o simile, in questo modo non avrete bisogno di un postback (asincrono o altro).

Answer 3

Il motivo per cui non viene visualizzato è perché il documento probabilmente non è ancora stato caricato. e document.ready non è stato chiamato, quindi dialog ("open") viene chiamato prima della finestra di dialogo ({options}); quindi per risolvere questo problema basta aggiungere il codice a una chiamata doc.ready.

Inoltre, il tuo unico caricare la finestra di una volta, in modo che non si ha realmente bisogno per inizializzare come AutoOpen: true, utilizzare il display: none poi vederlo come John Boker detto

function showjQueryDialog() { 
    $(document).ready(function() { 
    $("#dialog").dialog({ 
     modal: true, 
     buttons: { "Renew Membership": function() { $(this).dialog("close"); } }); 
    $("#dialog").show(); // sets display:block; 
    //alert("Time to renew Membership!"); 
    }); 
} 

<div id="dialog" style="display:none"> 
    <!--..--> 
</div> 

Answer 4

So che questo è vecchio ora Tuttavia, imposta la classe sull'interfaccia utente jQuery integrata in ui-helper-hidden.

<div id="dialog" title="Membership Renewal" class="ui-helper-hidden"> 
    Your membership is going to expire. 
</div> 

Questo risolverà il comportamento indesiderato del cameo.