Ver Mensaje Individual
  #1 (permalink)  
Antiguo 18/11/2013, 13:57
Avatar de satjaen
satjaen
 
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 2 meses
Puntos: 10
Diferenciar el css de dos botones.

Hola tengo un dialogo alert que funciona bien, tiene dos botones (Aceptar y Cancelar) pero al pulsar en cualquiera de ellos se iluminan los dos y quisiera que solo se iluminara solo el deseas señalar en ese momento. Como puedo distinguirlos ?


css

Código CSS:
Ver original
  1. #popup_container.button:hover  INPUT[type='button']
  2.  {
  3.     background: #206bcb;
  4.     background-image: linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
  5.     background-image: -o-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
  6.     background-image: -moz-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
  7.     background-image: -webkit-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
  8.     background-image: -ms-linear-gradient(bottom, #206ACB 0%, #3E9DE5 100%);
  9.     background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #206ACB),color-stop(1, #3E9DE5));
  10.     background-clip: padding-box!important;
  11.     border-top: 1px solid #2a73a6!important;
  12.     border-right: 1px solid #165899!important;
  13.     border-bottom: 1px solid #07428f!important;
  14.     border-left: 1px solid #165899!important;
  15.     box-shadow: inset 0 1px 0 0 #62b1e9!important;
  16.     cursor: pointer!important;
  17.     text-shadow: 0 -1px 1px #1d62ab!important;
  18.     color: #FFF!important;
  19.   }
  20.  
  21. #popup_container.button INPUT[type='button'] {
  22.  
  23.     background:#e5e5e5;
  24.     display:inline-block;
  25.     margin:0 6px;
  26.     padding:7px 20px 7px;
  27.     color:#333;
  28.     text-decoration:none;
  29.     text-shadow: 0 1px 1px #FFF;
  30.     border:1px solid #ccc;
  31.  
  32.     /* Bordes redondenados - Border Radius */
  33.     -webkit-border-radius:4px;
  34.     -moz-border-radius:4px;
  35.     border-radius:4px;
  36.  
  37.     /* Fondo Degradado - Background Gradient */
  38.     background:-webkit-linear-gradient(top, #fefefe, #e5e5e5); /* Chrome 10+ */
  39.     background:   -moz-linear-gradient(top, #fefefe, #e5e5e5); /* Firefox 3.6+ */
  40.     background:    -ms-linear-gradient(top, #fefefe, #e5e5e5); /* IE10 */
  41.     background:        linear-gradient(top, #fefefe, #e5e5e5);
  42.  
  43.     /* Aplcamos sombras al boton - Box Shadow */
  44.     -webkit-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
  45.     -moz-box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
  46.     box-shadow:inset 0 1px 0 rgba(255,255,255, .3), inset 0 0 0 1px rgba(255,255,255, .6), 0 1px 2px rgba(0, 0, 0, .1);
  47.  
  48.     /* Animacion - Transition */
  49.     -webkit-transition: all ease-in-out .3s;
  50.     -moz-transition: all ease-in-out .3s;
  51.     transition: all ease-in-out .3s;
  52.  
  53.   {


Código Javascript:
Ver original
  1. $.alerts = {
  2.        
  3.         // These properties can be read/written by accessing $.alerts.propertyName from your scripts at any time
  4.        
  5.         verticalOffset: -75,                // vertical offset of the dialog from center screen, in pixels
  6.         horizontalOffset: 0,                // horizontal offset of the dialog from center screen, in pixels/
  7.         repositionOnResize: true,           // re-centers the dialog on window resize
  8.         overlayOpacity: .01,                // transparency level of overlay
  9.         overlayColor: '#FFF',               // base color of overlay
  10.         draggable: true,                    // make the dialogs draggable (requires UI Draggables plugin)
  11.         okButton: ' Aceptar ',         // text for the OK button
  12.         cancelButton: ' Cancelar ', // text for the Cancel button
  13.         dialogClass: 'button',


Código Javascript:
Ver original
  1. case 'confirm':
  2.                     $("#popup_message").after('<div id="popup_panel"><input type="button" value="' + $.alerts.okButton + '" id="popup_ok" /><input type="button" value="' + $.alerts.cancelButton + '" id="popup_cancel" /></div>');


Muchas gracias