opción jQuery diálogo modal no funciona

Question

Este es el código HTML:

<div id="dialog" title="lala" style="display:none;"> 
     <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 

Este es el código JavaScript

$bb('#addTopicButton').live('click',function() { 

    $bb("#dialog").dialog({ modal:true, closeOnEscape: false, draggable:false, resizable:false }); 

     }); 

Por qué modal no está funcionando? Cuando está abierto, aún puedo hacer clic en otros enlaces en la página y hacer cosas en segundo plano.

Muchas gracias

ACTUALIZACIÓN: Parece estar funcionando sin embargo. Solo los enlaces están activos en segundo plano y funcionando. ¿Cómo puedo desactivar todo, incluidos los enlaces?

Answer 1

Probablemente solo necesite incluir el CSS de jQuery UI en su página.

Google tiene esto en su CDN aquí:

http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/base/jquery-ui.css

La opción modal en el diálogo crea una capa debajo de su diálogo, pero en el resto del contenido. Esta superposición necesita el jQuery UI CSS para funcionar correctamente.

Answer 2

Acabo de tener el mismo problema. Necesitaba el CSS, pero no quería todo. Así que sólo copia pegada esta parte de mi propio código CSS:

.ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #aaaaaa; 
    opacity: 0.3; 
} 

Answer 3

añadiendo solamente .ui-widget de superposición para el CSS hará que la superposición aparece en la parte superior completa, e incluso el diálogo será inutilizable.

Por lo tanto, la clase .ui-frente también debe ser añadido:

.ui-widget-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 
.ui-front { 
    z-index: 100; 
}