jQuery UI Dialog individuelle de style CSS

Question

jQuery UI Dialog individuelle de style CSS

Demandé el 20 de Août, 2009: Quand la question a-t-elle été
72457 affichage: Nombre de visites la question a
5 Réponses: Nombre de réponses aux questions
Résolu: Situation réelle de la question

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 car .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?

Demandé el 20 de Août, 2009 par Rio

Answer 1

5 Réponses

Answer 2

62voto

MorganTiley Points 1309

La version actuelle de la boîte de dialogue a l'option "dialogClass" que vous pouvez utiliser avec votre id. Par exemple,

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

Puis le CSS serait

.dialog_style1 {color:#aaa;}

Répondu el 21 de Juillet, 2011 par MorganTiley (1309 Points )

Answer 3

23voto

Rio Points 2324

Exécutez le code suivant juste après la boîte de dialogue est appelée en Ajax:

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

Cela s'applique tout à 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é sur une nouvelle réponse sur le Débordement de la Pile.)

Répondu el 20 de Août, 2009 par Rio (2324 Points )

Answer 4

4voto

Steve Points 341

Cette question tourné pour moi quand j'ai essayé 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 'CSS wrapper" - voir le Débordement de Pile question de CSS Personnalisé portée et jQuery UI dialog thèmes où j'ai trouvé la réponse à partir d' Evgeni Nabokov. Pour plus d'informations sur le CSS wrapper à utiliser avec une INTERFACE utilisateur de jQuery boîte de dialogue - 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 à l'aide, à l'Aide de Plusieurs jQuery UI Thèmes sur une Seule Page (Filament blog).

Répondu el 28 de Août, 2012 par Steve (341 Points )

Answer 5

3voto

Vasilij Points 31

Selon le dialogue de l'INTERFACE utilisateur de la documentation, la boîte de dialogue plugin 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 que ce 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) de la méthode. Par exemple:

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

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

et puis CSS il.

Répondu el 8 de Avril, 2011 par Vasilij (31 Points )

Answer 6

3voto

Steef Points 26

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:

<head>
    <link href="http://stackoverflow.com/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>

Répondu el 16 de Avril, 2013 par Steef (26 Points )

jQuery UI Dialog individuelle de style CSS

Réponses

Questions en vedette

Top Tags

Prograide.com

Powered by:

jQuery UI Dialog individuelle de style CSS

Réponses

Questions en vedette

Top Tags

Dans notre réseau

Prograide.com

Powered by: