Cuadro de diálogo de JQuery presentado momentáneamente en la página carga

Question

Creé una página que tiene un diálogo basado en JQuery usando la función JQuery UI estándar. Lo hago con la funcionalidad de JQuery lista para usar ... nada especial. Aquí está mi HTML para el diálogo:

<div id = "myDialog"> 
    <!-- ... more html in here for the dialog --> 
</div> 

Entonces el JQuery llamados en javascript que transforma el <div> a un cuadro de diálogo:

// pruned .js as an example of kicking up a JQuery dialog 
    $('#myDialog').dialog({ 
     autoOpen: false, 
     title: 'Title here', 
     modal: true 
     } 
    }); 

Una vez más, JQuery llano-vainilla. Así que inicie este asistente haciendo clic en un enlace en la página principal, y luego genera un diálogo de JQuery que tiene una gran cantidad de HTML que incluye imágenes, etc.

Mientras continuaba desarrollando esta página, empecé a notar que cuando cargué la página en el navegador que las etiquetas <div> que estaba poniendo en que JQuery se transforma en cuadros de diálogo se mostrarían muy brevemente. Entonces la página actuaría como se esperaba. En otras palabras, el cuadro de diálogo no estaría oculto, se mostraría brevemente en línea en la página. ¡Muy feo y poco profesional! Pero después de una fracción de segundo, la página se mostraría correctamente y se vería exactamente como esperaba/quería.

Con el tiempo, a medida que el tamaño de la página creció, creció el tiempo en que la página permanecería incorrectamente representada. Supongo que el motor de renderizado del navegador muestra la página mientras se está cargando, y al final está iniciando JQuery que transformará el <div> en un cuadro de diálogo. Esta función JQuery transformará el simple <div> en un cuadro de diálogo de JQuery y lo ocultará (ya que tengo la propiedad autoOpen establecida en falso). Algunos navegadores <tos> IE </tos > lo muestran más que otros. Mi gran diálogo ahora hace que la página se muestre incorrectamente durante aproximadamente 1 segundo ... ¡YUCK!

Answer 1

Usted puede agregar un poco de CSS por lo que es por defecto oculto, ningún código onload necesita:

#myDialog { display: none; } 

Con esto, ningún otro código es necesario, cuando se abre el cuadro de diálogo que va a revertir este estilo ... así que nada adicional para ejecutar en document.ready.Alternativamente, si usted tiene un montón de diálogos, darle una clase, así:

<div id="myDialog" class="dialog"></div> 

Con este CSS:

.dialog { display: none; } 

En casi todos los casos, jQuery utiliza el atributo display estilo de ocultar las cosas, entonces usar esto para ocultar inicialmente algo funcionará con lo que quiera usar el elemento para más adelante, ya sea un diálogo, un simple .fadeIn(), etc.

Answer 2

Se me ocurrió una solución a este problema que funciona bien, pero Me pregunto si alguien sabe de una mejor manera.

El problema es que el navegador representa el DOM a medida que lo carga, luego dispara el JQuery .js al final que lo oculta. Entonces, lo que estoy haciendo es desactivar la visibilidad en una etiqueta padre <div> para que todo el contenido del cuadro de diálogo esté oculto de manera predeterminada, y luego convertir esa etiqueta padre <div> en .js.

<div id="bodyDiv" style="visibility:hidden"> 
    <div id = "myDialog"> 
     <!-- ... more html in here for the dialog --> 
    </div> 
</div> 

entonces los js jQuery:

<script type="text/javascript"> 

$(document).ready(function() { 
    //turn the visibility on last thing 
    $("#bodyDiv").attr("style", "visibility:visible"); 
}); 
</script> 

como se puede ver, acabo de manera predeterminada desactivar la visibilidad de todo lo que la página se representa w/o mostrar el contenido de diálogo, entonces me vuelvo la visibilidad encendida de nuevo Esta no es una solución perfecta porque aún puede hacer que la página se comporte de forma extraña durante un segundo, pero al menos el cuadro de diálogo HTML no se muestra en línea. El UX con esta solución es aceptable, aunque no es ideal.

Answer 3

Yo uso los selectores CSS3 con un poco de nomenclatura & convención de etiqueta. Todos mis cuadros de diálogo son <div> elementos, y la identificación siempre termina con "diálogo". Luego utilizo este CSS:

div[id$=dialog] { display: none; } 

Un diálogo de ejemplo:

<div id="my-sample-dialog" title="Sample Dialog"> 
     <span>I'm invisible!</span> 
</div> 

En caso CSS3 no es una opción, puede utilizar CSS2 para lograr el mismo resultado, pero hay que tener más cuidado, no utilizar el apodo de diálogo en cualquier <div> ID no está destinada a ser escondido:

div[id~=dialog] { display: none; } 

y establecer su identificador de diálogo para algo así como "mi diálogo de ejemplo"

Answer 4

Si estás utilizando un "emergente" en lugar de un "diálogo" que tenía que hacer lo siguiente:

HTML

<div data-role="popup" class="popup"> 
    <!-- CONTENT --> 
</div> 

CSS

.popup { display:none; } 
.ui-popup-container .popup { display:block; } 

inicialmente ocultar la ventana emergente using display: none y después de jQueryUI envuelve la ventana emergente en un contenedor, el otro estilo tiene prioridad.