A la hora de crear un referente en twitter bootstrap, ¿hay alguna forma de cambiar el color de fondo? Quitar el sombreado totalmente?

NB: Para la eliminación de la sombra, este no trabajo, porque también los cambios haga clic en el comportamiento. (Todavía quiero ser capaz de hacer clic fuera de la modal para cerrarla.)

$("#myModal").modal({
  backdrop: false
});
  • Nota, desde una perspectiva de uso, manteniendo el clic para despedir el comportamiento sin ningún tipo de retroalimentación visual en todo (por ejemplo, quitar el sombreado completamente) es una muy mala experiencia. No hay nada para indicar al usuario que sus haga clic en el fondo es «segura» y no ir a través del control de debajo. También hay nada para indicar al usuario que se puede hacer clic en el fondo para descartar el modal en el primer lugar.
InformationsquelleAutor Abe | 2012-05-14

9 Comentarios

  1. 92

    Para cambiar el color a través de:

    CSS

    Poner estos estilos en su hoja de estilo después de la rutina de arranque estilos:

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

    Menos

    Cambia el bootstrap-variables:

    @modal-backdrop-bg:           red;

    Fuente

    Sass

    Cambia el bootstrap-variables:

    $modal-backdrop-bg:           red;

    Fuente

    Bootstrap-Personalizador

    Cambio @modal-backdrop-bg a su color deseado:

    getbootstrap.com/customize/


    También se puede quitar el fondo a través de Javascript, o establecer el color a transparent.

    • Así que esto sólo funciona si estoy usando MENOS, a la derecha…?
    • no se debe trabajar con sass o nada de eso. acaba de ser shure que poner estas líneas después de la rutina de arranque.css. No lo has probado???
    • Lo he probado pero cometió un error la primera vez. Gracias por la configuración de mí directamente.
    • Sólo tienes que incluir el bootstrap.css antes de que su archivo css y reemplazar las clases requeridas para el tema de los modales de la manera que usted desea. Ese es todo el punto de css…su cascada.
    • Para averiguar qué clase bootstrap para modificar, puede abrir Inspeccionar Elemento. Soy nuevo en bootstrap y no encontrar un buen recurso para encontrar todos los detalles acerca de los archivos de inicio de las clases y de los que se utilizan.
    • He utilizado un rápido estilo en línea en el modal-content objeto: style=»background-color: transparent; border: 0px;»

  2. 9

    Si quieres cambiar el color de fondo en el telón de fondo de un determinado modal, puede acceder el telón de fondo del elemento de esta manera:

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

    Entonces usted puede cambiar cualquier propiedad css a través de .css jquery función. En particular, con el fondo:

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

    Tenga en cuenta que $(‘#myModal’) tiene que ser inicializado, de lo contrario $telón de fondo va a ser nulo. Mismo se aplica a bs.modal elemento de datos.

    • Esto funciona perfectamente para la orientación de una específica modal. Y parece que la inicialización ocurre con la rapidez suficiente que se trabaja para poner esta línea directamente después de $('#myModal').modal(); (si no, esto tendría que estar envuelto en un detector de eventos para #myModal de la ‘muestra’ evento). Nota que en lugar de poner los estilos css directamente en javascript, puede utilizar $('#myModal').data('bs.modal').$backdrop.addClass('myModal-backdrop'); como @Simon-Bengtsson muestra en su respuesta.
  3. 6

    CSS

    Si esto no funciona:

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

    intente esto:

    .modal { 
       background-color: red !important; 
    }
    • En mi caso el !importante resolver el problema. Gracias.
  4. 3

    Se pone un poco más complicado si desea agregar el fondo a una determinada modal. Una forma de solucionar eso es para agregar y llame algo como esta función en lugar de mostrar el modal directamente:

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

    Css se puede aplicar a la background-backdrop clase.

  5. 2

    Agregar 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">
    ...
    ...
    • he intentado todas las otras respuestas este es el único que trabajó por alguna razón..
  6. 1

    Si necesita quitar el sombreado para un solo tipo de modal windows, usted puede simplemente añadir IDENTIFICADOR de ventana modal

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

    y en que archivo css añadir el siguiente

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

    Si necesita quitar el sombreado para todos modal windows, acaba de saltar el paso con la asignación de ID.

    • Traté de esta primera y no funciona en absoluto. Parece bootstrap pone el .modal-telón de fondo del elemento en una forma completamente separada lugar en el DOM, no se encuentra dentro de las #myModal elemento. Por lo que el id #myModal no tiene nada que hacer con el .modal-telón de fondo y el estilo CSS es ignorado.
  7. 1

    Para el Bootstrap 4 puede que tenga que utilizar .modal-backdrop.show y jugar con !important bandera en ambos background-color y opacity.

    E. g.

    .modal-backdrop.show {
       background-color: #f00;
       opacity: 0.75;
    }
  8. 0

    He utilizado un par de horas tratando de entender cómo eliminar el fondo de marcha modal, hasta el momento trató de

    .modal-backdrop {    background: none; }

    No funciona
    incluso he intentado trabajar con javascript como

     <script type="text/javascript">   
     $('#modal-id').on('shown.bs.modal',  function () {
           $(".modal-backdrop.in").hide();     })
    </script>

    También no funciona tampoco.
    Acabo de añadir

    data-backdrop="false"

    a

    <div class="modal fade" id="myModal" data-backdrop="false">......</div>

    Y Aplicando css de la CLASE

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

    Ahora su trabajo como un encanto
    Esta trabajado con Bootstrap 3

Dejar respuesta

Please enter your comment!
Please enter your name here