css - remove - modal html

Bootstrap Modal sentado detrás del telón de fondo

Question

Así que tengo casi el mismo problema que @Jamescoo , pero creo que mi problema proviene del hecho de que ya he colocado un par de DIV para crear un panel de navegación deslizante.

Aquí está mi configuración exacta replicada: http://jsfiddle.net/ZBQ8U/2/

BONO: Siéntase libre de tomar el código para el panel deslizante si lo desea :)

Los índices z no deberían entrar en conflicto y sus valores mostrarían que están apilando correctamente, pero visualmente no lo están.

Una vez que haces clic en el botón ''Abrir Modal'', <div class="modal-backdrop fade in"></div> cubre todo! (Tendrás que volver a ejecutar el código para restablecerlo)

No sé muy bien cómo remediar este ... ¿Alguna idea?

Answer 1

Además de todas las respuestas aquí, descubrí que el bootstrap4 "fadeIn animado" también está causando este error (no se puede hacer clic modal detrás del fondo):

compruebe si su modal está en la siguiente etiqueta padre (animación de arranque)

<div class="animated fadeIn"></div>

Eliminé esta etiqueta, resolví el problema para mí.

Answer 2

Aunque el índice z de .modal es más alto que el del .modal-backdrop , ese .modal está en un parent div #content-wrap que tiene un z-index .modal-backdrop que .modal-backdrop (z-index: 1002 vs z-index: 1030).

Debido a que el padre tiene un índice z más bajo que el .modal-backdrop todo en él estará detrás del modal, independientemente de cualquier índice Z dado a los niños.

Si elimina el z-index que ha establecido en body div#fullContainer #content-wrap y también en el #ctrlNavPanel , todo parece funcionar bien.

body div#fullContainer #content-wrap {
  background: #ffffff;
  bottom: 0;
  box-shadow: -5px 0px 8px #000000;
  position: absolute;
  top: 0;
  width: 100%;
}

#ctrlNavPanel {
  background: #333333;
  bottom: 0;
  box-sizing: content-box;
  height: 100%;
  overflow-y: auto;
  position: absolute;
  top: 0;
  width: 250px;
}

NOTA: Creo que inicialmente usaste z-indexes en # content-wrap y #ctrlNavPanel para asegurarte de que el navegador se encuentre atrás, pero eso no es necesario porque el elemento nav viene antes del contenido, envuelve el HTML, por lo que solo necesita colocarlos, no establecer explícitamente un orden de apilamiento.

EDITAR A medida que Schmalzy comenzó a leer, ya no se puede hacer clic en los enlaces. Esto se debe a que el contenedor completo tiene un ancho del 100% y cubre la navegación. La manera más rápida de arreglar esto es colocar la navegación dentro de ese div:

<div id="fullContainer">
  <aside id="ctrlNavPanel">
    <ul class="nav-link-list">
      <li><label>Menu</label></li>
      <li><a href="/"><span class="fa fa-lg fa-home"></span> Home</a></li>
      <li><a><span class="fa fa-lg fa-group"></span>About Us</a></li>
      <li><a><span class="fa fa-lg fa-book"></span> Contacts</a></li>
    </ul>
  </aside>
  <div id="content-wrap">
    ...
  </div>
</div>

DEMO AQUÍ

Answer 3

Como no tengo la posibilidad de mover el marcado modal porque lo agregué en una plantilla parcial dentro de un condicional, lo que funcionó para mí es agregar el siguiente código de CSS

.modal.fade {
    display: none;
}

Luego, cuando boostrap agregue la clase "in" a través de js, aplique display: block y todo funciona bien.

Answer 4

En mi caso, podría solucionarlo agregando css para .modal-backdrop

.modal-backdrop {
  z-index: -1;
}

Aunque esto funciona, los controles de formulario aún parecen aparecer sobre el fondo, al hacer clic en cualquier lugar se descarta el modal, pero no se ve muy bien.

Una solución mejor para mí es enlazar al evento mostrado (una vez que se carga la página) y corregir la propiedad z-index.

$(''.modal'').on(''shown.bs.modal'', function() {
  $(this).css("z-index", parseInt($(''.modal-backdrop'').css(''z-index'')) + 1);
});

En este caso, si está de acuerdo con cambiar el DOM en modo modal que se muestra:

$(''.modal'').on(''shown.bs.modal'', function() {
  //Make sure the modal and backdrop are siblings (changes the DOM)
  $(this).before($(''.modal-backdrop''));
  //Make sure the z-index is higher than the backdrop
  $(this).css("z-index", parseInt($(''.modal-backdrop'').css(''z-index'')) + 1);
});

Answer 5

En mi caso, uno de los padres de mi modal estaba animado y tenía este

.animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; z-index: 100; }

El bloqueador aquí es animation-fill-mode: both; . No podía simplemente mover modal fuera, así que la solución era anular ''animation-fill-mode'' a animation-fill-mode: none; . La animación aún funcionaba bien.

Answer 6

Encontré que aplicando el marco iónico (ionic.min.cs) después de bootstrap cursando este problema para mí.

Answer 7

Estuve peleando con el mismo problema algunos días ... Encontré tres soluciones posibles, pero no sé, cuál es la más óptima, si alguien me dice, lo agradeceré.

las modificaciones estarán en bootstrap.css

Opción 1:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040; <- DELETE THIS LINE
  background-color: #000000;
}

Opcion 2:

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: -1; <- MODIFY THIS VALUE BY -1
  background-color: #000000;
}

Opción 3:

/*ADD THIS*/
.modal-backdrop.fade.in {
    z-index: -1;
}

Usé la opción 2.

Answer 8

Expliqué este problema, y ​​después de investigar mi CSS, el contenedor principal (hijo directo del cuerpo) tenía:

position: relative
z-index: 1

el fondo funcionó bien después de eliminar esas dos propiedades. También puede encontrar este problema si el wraper principal tiene una position: fixed

Answer 9

Intente eliminar el fondo, si realmente no lo necesita (data-backdrop = "false"):

<div class="modal fade" data-backdrop="false" role="dialog" id="my-modal" aria-labelledby="modal-title">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title" id="modal-title">No Backdrop</h3>
                </div>
                <div class="modal-body">
                    <p>
                        Look! No backdrop here!
                    </p>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button class="btn btn-primary">Ok</button>                    </div>
            </div>
        </div>
    </div>

Answer 10

Me faltaba el siguiente html

<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

lo agregó y trabajó sin problemas

Answer 11

Muchas veces, no puede mover el modal hacia afuera ya que esto afecta su estructura de diseño.

La razón por la que el fondo viene por encima de su modal es id. El padre tiene cualquier posición establecida.

Una forma muy simple de resolver el problema aparte de mover su modal al exterior es mover el fondo dentro de la estructura donde tiene su modal. En tu caso, podría ser

$(".modal-backdrop").appendTo("main");

Tenga en cuenta que esta solución es aplicable si tiene una estructura definida para su aplicación y no puede mover el modal al exterior ya que irá en contra de la estructura de diseño

Answer 12

Ninguna de las respuestas funcionó lo suficientemente bien para mí. El problema parece residir donde las ventanas modales deben estar fuera del cuerpo. Y no es lo mejor

Entonces este código hizo el trabajo de la mejor manera:

$(''.modal '').insertAfter($(''body''));

$(''#product_'' + product_id + '' .modal '').insertAfter($(''body''));

Answer 13

Otra resolución para este problema es agregar z-index: 0; a la clase .modal-backdrop en su archivo bootstrap-dialog.css si no desea modificar bootstrap.css.

Answer 14

Para aquellos que usan ASP.NET MVC ,

Necesitando mover el div modal antes de la etiqueta </body> pero no puede hacerlo porque está usando una página de Layout

Defina una sección en su archivo _Layout.cshtml justo antes de la etiqueta del cuerpo, por ejemplo:

... some html in layout page ...
@RenderSection("bottomHTML", required: false)
</body>
</html>

Entonces en tu vista

@section bottomHTML 
{
<div class="modal fade" id="myModalID" role="dialog" tabindex="-1" aria-labelledby="demo-default-modal" aria-hidden="true">
... rest of the modal div HTML ...
}

De esta forma, el HTML modal se procesará antes de que la etiqueta corporal y el modal ahora se muestren correctamente.

Answer 15

Pon este código donde quieras

$(''.modal'').on(''shown.bs.modal'', function () {
    var max_index = null;
    $(''.modal.fade.in'').not($(this)).each(function (index , value){
        if(max_index< parseInt( $(this).css("z-index")))
            max_index = parseInt( $(this).css("z-index"));
    });
    if (max_index != null) $(this).css("z-index", max_index + 1);
});

Answer 16

Primero asegúrese de que el modal no se encuentre en ningún div principal. A continuación, agregue $ (''# myModal''). AppendTo ("cuerpo")

Funcionó bien para mí

Answer 17

Puedes usar esto:

<div
  class="modal fade stick-up disable-scroll"
  id="filtersModal"
  tabindex="-1"
  role="dialog"
  aria-labelledby="filtersModal"
  aria-hidden="false"
  style="background-color: rgba(0, 0, 0, 0.5);" data-backdrop="false"
>
....
</div>

Adding style="" and data-backdrop false would fix it.

Answer 18

Si no puede poner el modal en la raíz (si su uso es angular y el modal está en un controlador, por ejemplo), la modificación de bootstrap o el uso de js obviamente es una mala solución.

lo que significa que tiene la estructura de su sitio web:

//not working
<div>
    <div>
        <div>
            <modal></modal>
        </div>
    </div>
</div>

abra su inspector de código y mueva el modal a la raíz, debería estar funcionando (pero no en el lugar que desee):

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
</div>
<modal></modal>

ahora colócalo en el primer div y comprueba si funciona: si es así, comprueba el próximo hijo hasta que no funcione y encuentra el div que es el problema;

//should be working
<div>
    <div>
        <div>

        </div>
    </div>
    <modal></modal>
</div>

Una vez que sepa qué div es el problema, puede jugar con la pantalla CSS y la posición para que funcione.

todos tienen una estructura diferente pero en mi caso estableciendo un padre para display: table; fue la solución

Answer 19

Si usa JQuery, puede usar el appendTo () para agregar el modal a un elemento específico, en este caso, en la mayoría de los casos, una línea simple puede mover su modal sobre el fondo, independientemente de dónde esté la posición de su div modal

$("#myModal").appendTo("body");

aquí está la referencia de la función JQuery appendTo: http://api.jquery.com/appendto/

Lo actualicé a tu violín http://jsfiddle.net/ZBQ8U/240/

Answer 20

Simplemente mueva todo el modal fuera del resto de su código, hasta el final. No necesita estar anidado en ningún otro elemento, que no sea el cuerpo.

<body>
    <!-- All other HTML -->
    <div>
        ...
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal">
        ...
    </div>
</body>

Demo

Sugieren esta solución en la documentación.

Colocación de marcas modales
Siempre trate de colocar un código HTML modal en una posición de nivel superior en su documento para evitar que otros componentes afecten la apariencia y / o funcionalidad del modal.

Answer 21

Tuve un problema similar al hecho de que el fundido no funcionaba y la superposición permaneció en la página. He añadido contenido dinámico a la página (actualice algunos contenidos solo en la acción modal). También tuve este $ (''# rejectModal -'' + itemId) .modal (''hide'') (itemId es una identificación dinámica para múltiples modos en una sola página para rechazar cierta información) pero el problema no desapareció.

La superposición se mantuvo porque mi diseño no estaba configurado como nulo en la vista parcial. Después de configurar esto, el problema desapareció:

@{ 
    Layout = null;
}

Answer 22

esto funciona para mi

<div class="modal fade" id="modalDecision" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="false">
<div class="modal-dialog modal-sm">
    <div class="modal-content">
        <div class="modal-body text-center">
            <asp:Label runat="server" Height="30px">Please select recovery delivery option</asp:Label>
            <asp:LinkButton ID="btnEmail" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Email</asp:LinkButton>
            <asp:LinkButton ID="btnText" CssClass="submit btn btn-primary" Width="100px" runat="server"
                OnClick="ModalRecovery">Text</asp:LinkButton>
        </div>
    </div>
</div>

var element = $(''#modalDecision'');
    // also taken from bootstrap 3 docs
    $(element).on(''shown.bs.modal'', function (e) {
        // keep in mind this only works as long as Bootstrap only supports 1 modal at a time, which is the case in Bootstrap 3 so far...
        var backDrop = $("<div class=''modal-backdrop'' style=''z-index:-1;opacity:.5''></div>");
        $(element).append($(backDrop));
    });

Answer 23

si no podemos eliminar el fondo y / o tenemos un marco de componentes como angular o vue, no podemos mover modal a la raíz. Hice este truco: poner mi contenedor modal-telón de fondo personalizado (con clase adicional) como hermano para contenedor de diálogo modal y agregué algunos css

<div bsModal #moneyModal="bs-modal" class="modal fade" tabindex="-1" role="dialog">
    <!-- magic container-->
    <div class="modal-holder modal-backdrop" (click)="moneyModal.hide()"></div>
    <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-body">
                ....
            </div>
        </div>
    </div>
</div>

y css

.modal-backdrop{z-index: -1}// or you can disable modal-backdrop
.modal-holder.modal-backdrop{z-index: 100}
.modal-holder + .modal-dialog {z-index: 1000}

Answer 24

simplemente elimine z-index: 1040 ;

de este archivo bootstrap.css class .modal-backdrop

Answer 25

simplemente mueva su modal fuera de todos los contenidos div, colóquelo en su mayoría antes del cierre del cuerpo.