JQuery boîte de Dialogue modale option ne fonctionne pas

Voici le code 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>

C'est le JavaScript

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

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

       });

Pourquoi modal n'est pas de travail? Quand il est ouvert, je ne peux toujours cliquer sur les autres liens de la page et de faire les choses dans le contexte.

Merci beaucoup

Mise à JOUR:
Il semble être au travail. Seuls les liens sont actifs dans l'arrière-plan et de travail. Comment puis-je désactiver tout, y compris des liens?

Pensez-vous avoir les fichiers CSS dans le bon endroit? Je me souviens, modal fonctionne en plaçant une superposition derrière la boîte de dialogue qui empêche l'utilisateur de cliquer où que ce soit d'autre. Cette superposition requiert certaines CSS pour fonctionner.
Je n'ai pas de css, où/comment le définir?
il est livré avec jqueryui

OriginalL'auteur Andrew | 2011-09-07

  1. 21

    Vous avez probablement juste besoin d'inclure jQuery UI CSS de votre page.

    Google a présent sur son CDN ici:

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

    Le modal option dans la boîte de dialogue crée une superposition en vertu de votre boîte de dialogue, mais sur le reste du contenu. Cette superposition a besoin de l'INTERFACE utilisateur de jQuery CSS pour fonctionner correctement.

    Qui était-il! Merci beaucoup, génial, je ne sais pas comment j'ai pu oublier
    C'est simple, je fais tout le temps. Passé une heure à essayer d'obtenir de jquery pour le travail, l'autre jour sur une nouvelle page et avait oublié d'inclure jquery

    OriginalL'auteur Jamie Dixon

  2. 17

    Juste eu le même problème. J'avais besoin de la CSS, mais je n'ai pas envie de tous. Je viens donc de le copier collé de la présente partie dans mon code CSS:

    .ui-widget-overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    background: #aaaaaa;
    opacity: 0.3;
}
    Simple et au point. Merci. Fonctionne pour moi 🙂
    Merci pour la partie nécessaire de la .fichier css 🙂
    Incroyable!! Je me sens stupide de ne pas penser à cela tout à l'heure 😛

    OriginalL'auteur Paul van den Dool

  3. 13

    En ajoutant seulement .ui-widget-superposition de votre css va rendre la superposition apparaissent sur le top, et même la boîte de dialogue sera inutilisable.

    Par conséquent, l' .l'interface utilisateur du front de classe devrait être ajouté:

    .ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.ui-front {
    z-index: 100;
}
    Beaucoup mieux dans mon cas, qu'y compris l'ensemble de la base des styles de jQ-UI. Merci beaucoup!

    OriginalL'auteur Yash