jQuery UI Dialog style CSS individuel

Question

Je cherche à créer une boîte de dialogue modale (en utilisant la boîte de dialogue UI) avec un CSS unique, distinct du dialogue traditionnel, donc deux boîtes de dialogue jQuery différentes.

J'ai Styled 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, je l'ai remarqué que l'utilisation de CSS séparée aux parties de style 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 casser 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 boîtes de dialogue dans la même page.

Comment est-ce que je peux faire ceci?

Answer 1

Exécutez la commande suivante immédiatement après la boîte de dialogue est appelé dans le Ajax:

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

Cela vaut pour la boîte de dialogue qui est ouvert, de sorte qu'il peut être changé pour chacun utilisé.

(Cette réponse rapide est basée sur une autre réponse sur la pile   débordement.)

Answer 2

Vous pouvez ajouter la classe au titre comme celui-ci:

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

Answer 3

Essayez:

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

La meilleure recommandation que je peux donner pour vous est de charger la page dans Firefox, ouvrez le dialogue et inspectez-le avec Firebug, puis essayez différents sélecteurs dans la console, et voyez ce qui fonctionne. Vous devrez peut-être utiliser certains des autres descendant selectors.

Answer 4

La méthode standard pour le faire est avec CSS Scopes de jQuery UI:

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

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

Christoph Herold designed a workaround que j'ai implemented as a jQuery plugin, peut-être que cela va aider.

Answer 5

Selon le UI dialog documentation, 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 que vous pouvez ajouter à une classe exactement à la première ou deuxième boîte de dialogue en utilisant la méthode la plus proche de jQuery ().Par exemple:

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

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

puis CSS il.

Answer 6

La version actuelle de la boîte de dialogue 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;} 

Answer 7

Cette question se pour moi quand je tentais de trouver une réponse similaire. Tenir compte:

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

Où abc est le nom de votre 'emballage CSS' - voir Stack Overflow question Custom CSS scope and jQuery UI dialog themes où j'ai trouvé la réponse de Evgeni Nabokov. Pour plus d'informations sur l'encapsuleur 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 de l'encapsuleur CSS avec la boîte de dialogue - vous avez besoin des commentaires ci-dessus pour aider, Using Multiple jQuery UI Themes on a Single Page . (blog Filament)

Answer 8

Je créé des styles personnalisés simplement en remplaçant les classes jQuery dans le style en ligne donc, en haut de la page, vous avez le CSS jQuery lié et juste après que passer outre 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>