contenido DIV muestra en la página en lugar de jQuery diálogo

Question

Tengo el siguiente marcado DIV:

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

Tengo el siguiente JavaScript para ejecutar el 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> 

tengo un asp: Button, que está dentro de un control y el control está en una página maestra. Lo primero que noto es que cuando se carga la página, se muestra el div y luego desaparece cuando la página termina de cargarse. Al hacer clic en el botón se ejecuta la siguiente:

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

Al hacer clic en el botón, en lugar de un cuadro de diálogo que se levante, el contenido del div solo se hace visible.

Answer 1

Creo que tiene dos problemas relacionados aquí.

La razón por la que se muestra DIV la primera vez que carga es porque todavía no le ha dicho que no. La secuencia de comandos jQuery que hace que DIV se comporte como un diálogo no se ejecuta hasta que se cargue el HTML DOM, y hasta entonces no ocultará el DIV. Una solución simple es ocultar el DIV por defecto usando CSS.

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

El botón de clic problema está relacionado: RegisterClientScriptBlock dará salida a un script que se ejecuta tan pronto como se encuentra, por lo que el código de jQuery que lo convierte en un cuadro de diálogo no ha tenido la oportunidad de correr todavía. Para darle la oportunidad de hacerlo, puede cambiar el código de C# para usar RegisterStartupScript, lo que retrasará la ejecución de showjQueryDialog() hasta que la página haya terminado de cargarse y el código de jQuery haya tenido la oportunidad de convertir el DIV en un diálogo.

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

Answer 2

asegúrese de que está especificando el tipo de documento correcto en la parte superior de su página, esto parece ser la causa de algunos problemas que he visto.

edición:

también, para evitar que parpadear al principio puede tener algo como

#debug { display: none; } 

algún lugar antes del elemento (muy probablemente su hoja de estilo o en la cabeza).

otra cosa que podría ayudar es si se pone conjunto:

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

en la carga de la página o similares, de esa manera usted no necesita una devolución de datos (asincrónica o no).

Answer 3

La razón por la que no se muestra es porque el documento probablemente aún no se ha cargado. y document.ready no se ha llamado, por lo que se llama al diálogo ("abrir") antes del diálogo ({options}); para solucionar esto solo agregue el código en una llamada doc.ready.

Además, su única cargar el diálogo de una vez, por lo que no es realmente necesario para inicializar como Autoopen: falso, utilizar el display: none luego mostrar como John Boker dijo

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

Sé que este es viejo ahora Sin embargo, configure su clase en la interfaz de usuario de jQuery integrada en ui-helper-hidden.

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

Esto resolverá el comportamiento de cameo no deseado de su div.