web-dev-qa-db-fra.com

Boîte de dialogue jQuery UI style CSS individuel

Je cherche à styliser une boîte de dialogue modale (en utilisant la boîte de dialogue d'interface utilisateur) avec un CSS unique qui est distinct de la boîte de dialogue traditionnelle, donc essentiellement pour avoir deux boîtes de dialogue jQuery qui ont chacune un aspect différent.

J'en ai stylé un, 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 de CSS séparés pour styliser des parties de la boîte de dialogue, comme

.dialog1 .ui-dialog-titlebar { display:none; }
.dialog2 .ui-dialog-titlebar { color:#aaa; }

ne fonctionne pas car .ui-dialog-titlebar n'a pas la classe .dialog1, et je ne peux pas faire de addClass non plus sans pénétrer dans le plugin.

Une alternative serait d'avoir un élément comme body avoir une classe/id unique (selon celui que je veux), mais cela empêcherait d'avoir les deux dialogues dans la même page.

Comment puis-je faire ceci?

jquerycssjquery-uidialogmodal-dialog
34
Rio

Exécutez ce qui suit immédiatement après l'appel de la boîte de dialogue dans le Ajax :

    $(".ui-dialog-titlebar").hide();
    $(".ui-dialog").addClass("customclass");

Cela s'applique uniquement à la boîte de dialogue qui est ouverte, elle peut donc être modifiée pour chacune d'elles.

(Cette réponse rapide est basée sur une autre réponse sur Stack Overflow.)

23
Rio

La version actuelle de dialog a l'option "dialogClass" que vous pouvez utiliser avec vos identifiants. Par exemple,

$('foo').dialog({dialogClass:'dialog_style1'});

Alors le CSS serait

.dialog_style1 {color:#aaa;}
62
Morgan T.

Ce problème est apparu pour moi lorsque j'essayais de trouver une réponse similaire. Considérer:

    $('.ui-dialog').wrap('<div class="abc" />');
    $('.ui-widget-overlay').wrap('<div class="abc" />');

Où abc est le nom de votre 'enveloppe CSS' - voir la question Stack Overflow Portée CSS personnalisée et thèmes de dialogue jQuery UI où j'ai trouvé la réponse de Evgeni Nabokov . Pour plus d'informations sur le wrapper CSS utilisé avec une boîte de dialogue jQuery UI - voir ce qui suit (mais notez qu'ils ne résolvent PAS vraiment le problème du wrapper CSS avec la boîte de dialogue - vous avez besoin des commentaires ci-dessus pour vous y aider, tilisation de plusieurs thèmes jQuery UI sur une seule page (Blog Filament).

4
Steve

J'ai créé des styles personnalisés en remplaçant simplement les classes jQuery dans un style en ligne. Donc, en haut de la page, vous avez le jQuery CSS lié et juste après cela, remplacez les classes que vous devez modifier:

<head>
    <link href="/Content/theme/base/jquery.ui.all.css" rel="stylesheet"/>

    <style type="text/css">
        .ui-dialog .ui-dialog-content
        {
            position: relative;
            border: 0;
            padding: .5em 1em;
            background: none;
            overflow: auto;
            zoom: 1;
            background-color: #ffd;
            border: solid 1px #ea7;
        }

        .ui-dialog .ui-dialog-titlebar
        {
            display:none;
        }

        .ui-widget-content
        {
            border:none;
        }
    </style>
</head>
3
Steef

Selon la documentation de dialogue UI , le plugin de dialogue génère quelque chose comme ceci:

<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
   <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
      <span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
      <a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
   </div>
   <div class="ui-dialog-content ui-widget-content" id="dialog_style1">
      <p>One content</p>
   </div>
</div>

Cela signifie ce que vous pouvez ajouter à n'importe quelle classe exactement dans la première ou la deuxième boîte de dialogue en utilisant la méthode le plus proche () de jQuery. Par exemple:

$('#dialog_style1').closest('.ui-dialog').addClass('dialog_style1');

$('#dialog_style2').closest('.ui-dialog').addClass('dialog_style2');

puis CSS.

3
Vasilij

La façon standard de le faire est avec les interfaces jQuery UI CSS Scopes :

<div class="myCssScope">
   <!-- dialog goes here -->
</div>

Malheureusement, la boîte de dialogue jQuery UI déplace les éléments DOM de la boîte de dialogue à la fin du document, pour résoudre les problèmes potentiels d'index z. Cela signifie que la portée ne fonctionnera pas (elle n'aura plus d'ancêtre ".myCssScope").

Christoph Herold conçu une solution de contournement que j'ai implémenté en tant que plugin jQuery , peut-être que cela aidera.

2
orip

Vous pouvez ajouter la classe au titre comme ceci:

$('#dialog_style1').siblings('div.ui-dialog-titlebar').addClass('dialog1');
1
Daniel Moura

Essayez-les:

#dialog_style1 .ui-dialog-titlebar { display:none; }
#dialog_style2 .ui-dialog-titlebar { color:#aaa; }

La meilleure recommandation que je puisse vous donner est de charger la page dans Firefox, d'ouvrir la boîte de dialogue et de l'inspecter avec Firebug, puis d'essayer différents sélecteurs dans la console et de voir ce qui fonctionne. Vous devrez peut-être utiliser certains des autres sélecteurs descendants .

0
Pawel Krakowiak