jQuery UI Dialog Estilo de CSS individual

Question

Estoy buscando darle estilo a un cuadro de diálogo modal (usando UI Dialog) con un CSS único que es diferente del diálogo tradicional, por lo que en esencia es necesario tener dos cuadros de diálogo jQuery diferentes.

He LABRÓ uno, por ejemplo,

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

y otro

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

Por desgracia me he dado cuenta de que el uso de CSS separado para partes de estilo del cuadro de diálogo, como

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

no funciona porque .ui-dialog-titlebar no tiene la clase .dialog1, y no puedo hacer un addClass sin entrar en el plugin.

Una alternativa sería tener un elemento como body tener una clase/id única (dependiendo de cuál yo quiera), pero eso impediría tener ambos cuadros de diálogo en la misma página.

¿Cómo puedo hacer esto?

Answer 1

Ejecutar lo siguiente inmediatamente después de que el diálogo se llama en el Ajax:

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

Esto se aplica sólo para el cuadro de diálogo que se abre, por lo que se puede cambiar para cada uno usado.

(Esta respuesta rápida se basa en otra respuesta en la pila   desbordamiento.)

Answer 2

Usted puede agregar a la clase que el título de esta manera:

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

Answer 3

Prueba estas:

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

La mejor recomendación que puedo dar para usted es para cargar la página en Firefox, abra la dialogar e inspeccionarlo con Firebug, luego probar diferentes selectores en la consola y ver qué funciona. Es posible que necesite usar algunos de los otros descendant selectors.

Answer 4

La forma habitual de hacerlo es con jQuery UI CSS Scopes:

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

Por desgracia, el cuadro de diálogo jQuery UI mueve el Diálogo elementos DOM al final del documento, para corregir posibles problemas de índice z. Esto significa que el alcance no funcionará (ya no tendrá un antepasado ".myCssScope").

Christoph Herold designed a workaround que tengo implemented as a jQuery plugin, quizás eso ayude.

Answer 5

De acuerdo con la UI dialog documentation, el plug-in de diálogo genera algo como esto:

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

Eso significa que lo que se puede añadir a cualquier clase de exactitud a la primera o segunda de diálogo usando más cercano) método (de jQuery.Por ejemplo:

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

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

y luego CSS.

Answer 6

La versión actual del diálogo tiene la opción "dialogClass" que puede usar con su id. Por ejemplo,

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

Entonces el CSS habría

.dialog_style1 {color:#aaa;} 

Answer 7

Este problema se presentó para mí cuando yo estaba tratando de encontrar una respuesta similar. Consideremos:

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

Dónde abc es el nombre de su 'envoltorio CSS' - ver desbordamiento de pila pregunta Custom CSS scope and jQuery UI dialog themes donde encontré la respuesta de Evgeni Nabokov. Para obtener más información sobre el contenedor CSS en uso con un cuadro de diálogo jQuery UI, consulte lo siguiente (pero tenga en cuenta que NO resuelven realmente el problema del contenedor CSS con el cuadro de diálogo - necesita los comentarios anteriores para ayudar allí, Using Multiple jQuery UI Themes on a Single Page . (blog filamento)

Answer 8

creé estilos personalizados con sólo anulando clases de jQuery en el estilo en línea Así que en la parte superior de la página, usted tiene la CSS jQuery vinculado y justo después de que anulen las clases que necesita para modificar:.

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