2010-07-14 3 views
1

A http://jqueryui.com/demos/dialog/#modal-form, il y a un exemple de dialogue modal; lorsque vous cliquez sur "Créer un nouvel utilisateur", il affiche une boîte de dialogue modale et supprime tout sauf la boîte de dialogue. Sur mon travail basé sur cela, j'ai spécifié "modal: true", et la boîte de dialogue modale apparaît et disparaît de manière appropriée, mais rien d'autre n'est grisé; le reste de l'écran ressemble à ce qu'il était avant.Comment gérer le fondu de dialogue modal dans l'interface utilisateur jQuery?

Ai-je besoin d'appliquer des CSS supplémentaires ou de servir une image? Un bref coup d'œil sur le code source de l'échantillon ne m'a pas permis de voir clairement ce que je devais ajouter afin de griser l'arrière-plan.

Si j'ai besoin d'autres contenus statiques, comment puis-je le faire sous un Django/static/tree? En d'autres termes, ai-je besoin de créer des répertoires de contenu statique/foo/et/bar/additional, ou fonctionnera-t-il avec des sous-répertoires de/static /?

Répondre

1

Lorsque vous passez modal:true comme l'une des options à ui-dialogue, il devrait y avoir un élément de recouvrement div créé avec un z-index élevé et un nom de classe de ui-widget-overlay qui lui est attribué. Si vous avez décidé d'écrire vos propres feuilles de style plutôt que d'en utiliser un comme modèle, il se peut que vous deviez définir la classe ui-widget-overlay dans vos feuilles de style, définir son opacité, etc.

+0

Merci; laisse moi jouer avec ça. – JonathanHayward

+0

J'ai créé un div overlay avec un index z élevé (1000 pour le div, non spécifié pour les entrées de formulaire). Les paramètres background-color et background-image semblent se retrouver derrière les entrées de formulaire, pas devant eux; c'est-à-dire qu'à une opacité non spécifiée (100%), ils masquent l'arrière-plan mais pas le premier plan. – JonathanHayward

+0

Je pense que vous avez mal compris ma réponse: le div avec le nom de classe «ui-widget-overlay» est créé dynamiquement par l'interface utilisateur jQuery. Tout ce que vous avez à faire est d'ajouter quelque chose comme ceci à vos feuilles de style: .ui-widget-overlay { fond: # 000; opacité: 0,5; } – dmkc

0

Avez-vous l'option appropriée? fichiers de thème au bon endroit sur le serveur? Si vous n'utilisez pas un thème standard par défaut, vous pouvez créer le vôtre en utilisant le rouleau de thème de jQuery UI.

+0

Quelle est la bonne place sur le serveur? Peut-il passer sous/static /, ou peut/devrais-je créer des répertoires distincts au niveau racine? – JonathanHayward

+0

Il peut aller partout où vous avez choisi tant que vous pointez le fichier css requis au bon endroit. Assurez-vous que quel que soit le répertoire dans lequel se trouve le thème css, le répertoire images joint est également présent. Donc, si votre thème se trouve dans /static/jquery/theme/mytheme/mytheme.css alors votre répertoire d'images pour le thème serait /static/jquery/theme/mytheme/images / – Mark