jQuery UI Dialog individuelle de style CSS
Je suis à la recherche de style une boîte de dialogue modale (à l'aide de Dialogue de l'INTERFACE utilisateur) avec unique CSS qui est séparée de la boîte de dialogue classique, donc, en substance, d'avoir deux jQuery boîtes de dialogue que chaque aspect différent.
J'ai un style, par exemple,
<div id="dialog_style1" class="dialog1 hidden">One content</div>
et un autre
<div id="dialog_style2" class="dialog2 hidden">Another content</div>
Malheureusement, j'ai remarqué que l'utilisation séparée CSS pour mettre en forme les pièces de la boîte de dialogue, comme
.dialog1 .ui-dialog-titlebar { display:none; }
.dialog2 .ui-dialog-titlebar { color:#aaa; }
ne fonctionne pas parce que .ui-dialog-titlebar
n'a pas la classe .dialog1
, et je ne peux pas faire un addClass
soit sans rupture dans le plugin.
Une alternative serait d'avoir un élément comme body
ont une unique classe/id (en fonction de ce que je veux), mais qui empêcheraient d'avoir les deux boîtes de dialogue dans la même page.
Comment puis-je faire cela?
Vous devez vous connecter pour publier un commentaire.
La version actuelle de la boîte de dialogue a l'option "dialogClass" que vous pouvez utiliser avec votre id.
Par exemple,
Puis le CSS serait
Exécutez le code suivant juste après la boîte de dialogue est appelée dans le Ajax:
Cela s'applique seulement à la boîte de dialogue qui s'ouvre, de sorte qu'il peut être modifié pour chaque utilisée.
(Cette réponse rapide est basée sur une autre réponse sur Pile Overflow.)
Cette question tourné pour moi quand j'ai essayé de trouver une réponse similaire. Considérer:
Où
abc
est le nom de votre 'CSS wrapper" - voir le Débordement de Pile question CSS personnalisé portée et jQuery UI dialog thèmes où j'ai trouvé la réponse à partir de Evgeni Nabokov. Pour plus d'informations sur le CSS wrapper de l'utilisation avec un jQuery UI la boîte de dialogue de voir la suite (mais ne PAS vraiment résoudre le problème de la CSS wrapper avec la boîte de dialogue - vous besoin des commentaires ci-dessus pour y aider, À l'aide de Plusieurs jQuery UI Thèmes sur une Seule Page (Filament blog).Selon la Dialogue de l'INTERFACE utilisateur de la documentation, la boîte de dialogue plugin génère quelque chose comme ceci:
Qui signifie que vous pouvez ajouter à une catégorie pour exactement sur la première ou la deuxième boîte de dialogue à l'aide de jQuery plus proche (le) méthode. Par exemple:
et puis CSS il.
J'ai créé des styles personnalisés par juste primordial jQuery classes de style en ligne. Donc, en haut de la page, vous avez le jQuery, CSS lié et juste après, qui remplacent les classes dont vous avez besoin pour modifier:
Le standard de la façon de le faire est avec jQuery UI CSS Étendues:
Malheureusement, le jQuery, dialogue de l'INTERFACE utilisateur déplace la boîte de dialogue des éléments du DOM à la fin du document, de fixer le potentiel de z-index questions. Cela signifie que la portée ne fonctionne pas (il n'est plus ".myCssScope" ancêtre).
Christoph Herold conçu une solution de contournement que j'ai mis en œuvre en tant que plugin jQuery, peut-être, qui l'aide.
Vous pouvez ajouter la classe pour le titre comme ceci:
.ui-dialog-titlebar
n'a pas la classe.dialog1
. .dialog 1 {display:none;} se cacher de l'intégralité du contenu de la boîte de dialogue, que je ne veux pas.Essayez ces:
La meilleure recommandation que je peux donner pour vous est de charger la page dans Firefox, ouvrez la boîte de dialogue et l'inspecter avec Firebug, puis essayez différents sélecteurs dans la console, et voir ce qui fonctionne. Vous devrez peut-être utiliser certaines des descendant des sélecteurs.