No se puede obtener el cuadro de diálogo modal de jQuery UI modal

No puedo obtener una jQuery UI modal dialogar para que funcione como en el demo! Considere esta receta:No se puede obtener el cuadro de diálogo modal de jQuery UI modal

<html> 
    <head> 
    <script type="text/javascript" src="/javascripts/jquery.js"></script> 
    <script type="text/javascript" src="/javascripts/jquery-ui.js"></script> 
    </head> 
    <body> 
    <p>First open a modal <a href="" onclick="$('<div>something</div>').dialog({modal: true}); return false;"> dialog</a></p> 
    <p>Then try to hover over <a href="broken"> me</a></p> 
    <p>And <a onclick="alert('clicked!'); return false;" href="alsobroken"> click me!</a></p> 
    </body> 
</html>

Mientras que el diálogo está activo, el segundo enlace es correcta desactivado pero el tercer enlace (onclick) todavía funciona! Además, la pequeña mano del navegador aparece cuando se ciernen ambos enlaces. Esto no es como la demostración ... ¿Qué estoy haciendo mal?

Fuente

2010-11-07 Joao Tavora

Como Pointy señala, esto es normalmente controlado por el jQueryUI CSS. Pero uno puede sortearlo agregando un poco de hackish snippet a su archivo CSS.

.ui-widget-overlay { 
    height:100%; 
    left:0; 
    position:absolute; 
    top:0; 
    width:100%; 
}

De esa manera el div "mortaja" cubre todos los botones y no hay necesidad de utilizar el jQueryUI CSS.

Fuente

2010-11-07 16:00:33

El problema es que no está incluyendo el archivo CSS de jQuery UI. Obtiene el archivo CSS del paquete de descarga que prepara en el sitio de jQuery UI, o creo que puede obtener el estándar de "ligereza" de Google. Sin el archivo CSS, el mecanismo no puede hacer que la capa "cubierta" funcione. También puede haber notado que el diálogo no se parece a nada; eso mejorará también cuando agregue los archivos CSS.

http://jsfiddle.net/wxyBG/1/

Fuente

2010-11-07 13:43:12 Pointy

Preferiría no incluir el jQueryUI CSS. ¿Puede ayudarme a encontrar qué propiedad de CSS debe establecerse en qué clase de CSS para que funcione la capa de "cobertura"? Además, me di cuenta de que el diálogo no se parece a nada, en mi aplicación real tengo CSS en su lugar que se encarga de eso, esta era solo una receta simple. –

Bueno, simpatizo con usted aquí, pero los widgets de jQuery UI ** en gran medida ** dependen de ese CSS. Hay tanta dependencia de CSS allí, de hecho, que podría ser más fácil encontrar una herramienta de diálogo diferente. O bien, puede obtener su CSS y luego editarlo como lo desee. Es un poco desordenado, pero usaron buenos nombres de clase para que puedas descubrir qué es qué. Lo hice en mi propia aplicación, porque tampoco me gustaba el "aspecto" de las cosas de jQuery UI. – Pointy

Bueno, lo encontré, simplemente agregue .ui-widget-overlay { height: 100%; izquierda: 0; posición: absoluta; arriba: 0; ancho: 100%; } Esto hace que la capa de cubierta cubra todo lo demás. Gracias por su enlace "jsfiddle", ¡es una herramienta excelente para este tipo de experimentos! Así que para resumir: o bien incluya el jQuery UI CSS o use el truco anterior, si también agrega esta información a su respuesta lo aceptaré :-) –

No se puede obtener el cuadro de diálogo modal de jQuery UI modal

Respuesta

Cuestiones relacionadas