twitter bootstrap - change - ¿Cambiar el color de fondo en un modal de arranque de twitter?

modal backdrop

Question

Al crear un modal en twitter bootstrap, ¿hay alguna manera de cambiar el color de fondo? Eliminar el sombreado por completo?

NB: para eliminar el sombreado, esto no funciona, porque también cambia el comportamiento del clic. (Todavía quiero poder hacer clic fuera del modal para cerrarlo).

$("#myModal").modal({
  backdrop: false
});

Answer 1

Agregue el siguiente CSS;

.modal .modal-dialog .modal-content{  background-color: #d4c484; }

<div class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
...
...

Answer 2

Para cambiar el color a través de:

CSS

Coloque estos estilos en su hoja de estilos después de los estilos de arranque:

.modal-backdrop {
   background-color: red;
}

Menos

Cambia las variables de arranque a:

@modal-backdrop-bg:           red;

Source

Hablar con descaro a

Cambia las variables de arranque a:

$modal-backdrop-bg:           red;

Source

Bootstrap-Personalizador

Cambie @modal-backdrop-bg al color deseado:

getbootstrap.com/customize/

También puede eliminar el fondo a través de Javascript o configurando el color como transparent .

Answer 3

Se vuelve un poco más complicado si desea agregar el fondo a un modal específico. Una forma de resolver eso es agregar y llamar a algo así como esta función en lugar de mostrar el modal directamente:

function showModal(selector) {
    $(selector).modal(''show'');
    $(''.modal-backdrop'').addClass(''background-backdrop'');
}

Cualquier css se puede aplicar a la clase background-backdrop .

Answer 4

Si desea cambiar el color de fondo del fondo para un modal específico, puede acceder al elemento de fondo de esta manera:

$(''#myModal'').data(''bs.modal'').$backdrop

Luego puede cambiar cualquier propiedad css a través de la función .css jquery. En particular, con antecedentes:

$(''#myModal'').data(''bs.modal'').$backdrop.css(''background-color'',''orange'')

Tenga en cuenta que $ (''# myModal'') debe inicializarse, de lo contrario, $ backdrop va a ser nulo. Lo mismo se aplica al elemento de datos bs.modal.

Answer 5

Si necesita eliminar el sombreado solo para un tipo de ventanas modales, simplemente puede agregar ID a su ventana modal

<div class="modal fade" id="myModal">...</div>

y en su archivo css agregue lo siguiente

#myModal .modal-backdrop {background-color: transparent;}

Si necesita eliminar el sombreado de todas las ventanas modales, solo saltee el paso con la asignación de ID.

Answer 6

eliminar el fondo modal de arranque probar este

.modal-backdrop {
   background: none;
}

Answer 7

CSS

Si esto no funciona:

.modal-backdrop {
   background-color: red;
}

prueba esto:

.modal { 
   background-color: red !important; 
}