jQuery UI Finestra di dialogo stile CSS singolo

Question

Sto cercando di definire una finestra di dialogo modale (usando il Dialogo UI) con un CSS univoco separato dalla finestra di dialogo tradizionale, quindi essenzialmente due finestre di dialogo jQuery che sembrano diverse.

ho Styled uno, per esempio,

<div id="dialog_style1" class="dialog1 hidden">One content</div> 

e un altro

<div id="dialog_style2" class="dialog2 hidden">Another content</div> 

Purtroppo ho notato che usando i CSS separato per le parti di stile della finestra di dialogo, come

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

non funziona perché .ui-dialog-titlebar non ha la classe .dialog1, e non posso fare uno addClass senza irrompere nel plugin.

Un'alternativa sarebbe avere un elemento come body avere una classe/id univoca (a seconda di quale si desidera), ma ciò precluderebbe di avere entrambe le finestre di dialogo nella stessa pagina.

Come posso fare questo?

Answer 1

Eseguire il seguente subito dopo la finestra di dialogo viene chiamato nel Ajax:

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

Ciò vale solo per la finestra di dialogo che si apre, in modo che possa essere modificato per ciascuno di essi utilizzato.

(Questa risposta rapida si basa su un'altra risposta su Stack   Overflow.)

Answer 2

È possibile aggiungere la classe al titolo come questo:

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

Answer 3

provare questi:

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

La raccomandazione migliore che posso dare per voi è quello di caricare la pagina in Firefox, aprire la finestra di dialogo e ispezionarlo con Firebug, quindi provare diversi selettori nella console e vedere cosa funziona. Potrebbe essere necessario utilizzare alcuni degli altri descendant selectors.

Answer 4

Il modo standard per farlo è con jQuery UI CSS Scopes:

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

Purtroppo, la finestra di jQuery UI muove il dialogare elementi DOM alla fine del documento, per correggere potenziali problemi z-index. Ciò significa che l'ambito non funzionerà (non avrà più un antenato ".myCssScope").

Christoph Herold designed a workaround che ho implemented as a jQuery plugin, forse quello aiuterà.

Answer 5

Secondo il UI dialog documentation, la finestra di plug-in genera qualcosa di simile:

<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> 

Questo significa che ciò che è possibile aggiungere a qualsiasi classe esattamente al primo o al secondo dialogo utilizzando più vicino) il metodo (jQuery .Ad esempio:

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

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

e quindi CSS.

Answer 6

La versione corrente della finestra di dialogo ha l'opzione "dialogClass" che è possibile utilizzare con i propri ID. Per esempio,

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

Poi il CSS sarebbe

.dialog_style1 {color:#aaa;} 

Answer 7

Questo problema si presentò per me quando stavo cercando di trovare una risposta simile. Considerare:

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

Dove abc è il nome del 'involucro CSS' - vedere Stack Overflow questione Custom CSS scope and jQuery UI dialog themes dove ho trovato la risposta da Evgeni Nabokov. Per ulteriori informazioni sul wrapper CSS in uso con una finestra di dialogo jQuery UI, vedere quanto segue (ma si noti che NON risolvono veramente il problema del wrapper CSS con la finestra di dialogo - sono necessari i commenti sopra riportati per aiutarci, Using Multiple jQuery UI Themes on a Single Page . (Filament blog)

Answer 8

ho creato gli stili personalizzati, semplicemente ignorando le classi jQuery in stile in linea Quindi, sulla parte superiore della pagina, si ha la CSS jQuery legata e subito dopo ignorare le classi è necessario modificare:.

<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>