web-dev-qa-db-fra.com

Comment changer la couleur d'arrière-plan de la boîte de dialogue jQuery UI?

J'ai du mal à comprendre comment changer la couleur d'arrière-plan de jQuery UI Dialog.

J'ai vu de nombreuses références sur la façon de modifier/supprimer la barre de titre, mais pas l'arrière-plan entier, y compris les coins sinueux.

Voici mon essai:

http://jsfiddle.net/dEvKb/11/

Le problème est . Ui-widget-content ne s'applique qu'à la zone carrée dans la boîte de dialogue mais pas aux coins courbes.

J'ai trouvé une classe . Ui-corner-all en espérant qu'elle colorera tout l'arrière-plan mais seulement la moitié de la boîte de dialogue est colorée. (vous pouvez le voir dans le jsfiddle)

Quelqu'un a-t-il déjà fait cela?

javascriptjquerydialogstyles
14
Meow

vous pouvez utiliser de cette façon

http://jsfiddle.net/dEvKb/15/

Vous devez définir tous les antécédents de classe avec use! Important.

.ui-dialog,.ui-widget, .ui-widget-content, .ui-corner-all, .foo, .ui-draggable, .ui-resizable {background:yellow !important}

21
sinanakyazici

Utilisez les classes CSS:

  • ui-dialog
    • Conteneur principal de tout
  • ui-dialog-title
    • C'est là que le titre apparaît réellement
  • ui-dialog-titlebar
    • Zone où le titre de la boîte de dialogue serait s'il existe
  • ui-dialog-content
    • Zone où votre div est réellement chargé
  • ui-resizable-handle
    • Ces divs sont utilisées pour redimensionner la boîte de dialogue mais sont généralement invisibles en fonction de votre configuration
  • panneau de boutons ui-dialog
    • Voici où iraient les boutons s'ils existent
  • ui-dialog-buttonset
    • C'est là que les boutons apparaissent réellement

De plus, contrairement à la réponse donnée, notez VOUS N'AVEZ PAS À UTILISER !important.

Si vous voulez un appel direct, configurez tout et créez votre dialogue. Chargez la page dans Chrome ou FF (chrome plus facile à lire). Ensuite, ouvrez simplement la boîte de dialogue et sélectionnez l'élément que vous souhaitez modifier. Regardez son CSS dans votre Outils de développement du navigateur . Vous pourrez voir la ligne exacte que jqueryui utilise pour effectuer son appel css. Copiez simplement cette ligne dans votre propre CSS et assurez-vous qu'elle est chargée plus tard et votre boîte de dialogue obtiendra le nouveau remplacement.

19
SpYk3HH

Utilisez cette classe en CSS

.ui-dialog .ui-dialog-content {
    border: 0;
    padding: .5em 1em;
    background: #ff0000;
    overflow: auto;
    zoom: 1;
}
3
Deepakmahajan

Veuillez noter que vous pouvez également créer votre propre CSS personnalisé en utilisant ce lien dans jQuery

http://jqueryui.com/themeroller/

jQuery nous permet de faire un css personnalisé. Veuillez sélectionner le thème que vous souhaitez dans la galerie et appuyez sur le bouton Modifier, vous pourrez modifier presque tout sur la boîte de dialogue, ainsi que les coins arrondis.

Vous devez ensuite télécharger l'intégralité du pack jQuery à l'intérieur, vous trouverez le dossier css/custom-css juste placé dans votre balise css et il sera tout trié en gros.

Les façons ci-dessus sont également vraies car vous pourrez le changer mais vous devrez chercher les classes et des trucs comme ça dans le CSS bien jQuery le fait pour nous de manière simple et cela a fonctionné pour moi aussi pour que vous puissiez essayez-le aussi.

Ce que je fais essentiellement, c'est de créer deux à trois feuilles de style personnalisées, puis de les charger et de jouer avec elles et enfin d'en choisir une pour le site Web et de jeter le reste.

J'espère que ça aide...

2
Kevin

Si vous souhaitez cibler une boîte de dialogue spécifique, vous pouvez le faire de cette façon:

$('#yourDialog').dialog(
{
    autoOpen: false,
    open: function(e) {
        $(e.target).parent().css('background-color','orangered');
    }
});
2
zach

Réponse courte

your_stylesheet.css 

.ui-widget-content { background: yellow; }

Assurez-vous que votre feuille de style est incluse après la feuille de style de l'interface utilisateur JQuery, par exemple.

your_webpage.html 

    <link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <link href="your_stylesheet.css" rel="stylesheet" type="text/css"></link>

Longue réponse

Pour déterminer la classe et le style à remplacer, vous devrez inspecter une info-bulle. Afficher l'info-bulle:

$("#selector_for_item_with_tooltip").tooltip('open')

Faites un clic droit sur l'infobulle et choisissez "inspecter". Faites défiler vers le bas dans l'onglet "Styles" jusqu'à ce que vous trouviez l'attribut qui vous intéresse (background-color).

tooltip css styles

Vous pouvez cliquer sur la valeur et saisir une nouvelle valeur pour vérifier qu'elle aura l'effet souhaité.

change css style in browser

Pour voir le format que vous devrez utiliser pour remplacer le format, cliquez sur le nom de fichier: ligne # en haut à droite pour accéder au fichier .css qui définit l'attribut (jquery-ui.css:802)

jquery-ui css background style

Le format sera

.ui-widget-content
{
    background: yellow;
}

Votre .css le fichier doit utiliser le même style et être inclus après celui-ci (voir "réponse courte" ci-dessus).

Les gens ajoutent parfois de manière incorrecte !important suffixe css pour contourner cette exigence mais qui provoque toutes sortes d'autres maux de tête.

0
Stefan