twitter-bootstrap - ejemplos - modal bootstrap 4 example

Twitter bootstrap modal-backdrop no desaparece

Question

Estoy usando el diálogo Modal bootstrap de Twitter. Cuando hago clic en el botón enviar del cuadro de diálogo modal de arranque, envía una solicitud AJAX. Mi problema es que el telón de fondo modal no desaparece. El cuadro de diálogo modal desaparece correctamente, pero en su lugar, "modal-background in" que crea la opacidad en la pantalla permanece

¿Que puedo hacer?

Answer 1

$ (''# myModal''). trigger (''click'');

Esto funcionó para mí. No se cierra porque cuando abres la ventana emergente, se activan 2 o 3 fondos de modo. Así que cuando haces $ (''# myModal'')). Modal (''hide''); Solo tiene efecto un fondo modal y el resto permanece.

Answer 2

.modal (''ocultar'')

Oculta manualmente un modal. Regresa a la persona que llama antes de que el modal haya sido realmente oculto (es decir, antes de que ocurra el evento hidden.bs.modal).

Así que en lugar de

$(''#myModal'').modal(''hide'');
$(''#someOtherSelector'').trigger(''click'');

hacer

$(''#myModal'').modal(''hide'');
$(''#myModal'').on(''hidden.bs.modal'', function() {
   $(''#someOtherSelector'').trigger(''click'');
});

Por lo tanto, está seguro de esperar hasta que finalice el evento "hide".

Answer 3

Acabo de pasar demasiado tiempo en este problema :)

Si bien las otras respuestas proporcionadas son útiles y válidas, me pareció un poco desordenado recrear efectivamente la funcionalidad de ocultación modal de Bootstrap, así que encontré una solución más limpia.

El problema es que hay una cadena de eventos que suceden cuando llamas

$("#myModal").modal(''hide'');
functionThatEndsUpDestroyingTheDOM()

Cuando luego reemplaza un montón de HTML como resultado de la solicitud de AJAX, los eventos de ocultación modal no terminan. Sin embargo, Bootstrap desencadena un evento cuando todo está terminado , y puedes conectarlo así:

$("#myModal").modal(''hide'').on(''hidden.bs.modal'', functionThatEndsUpDestroyingTheDOM);

Espero que esto sea de ayuda!

Answer 4

Asegúrese de que no está reemplazando el contenedor que contiene la ventana modal real cuando está realizando la solicitud AJAX, ya que Bootstrap no podrá encontrar una referencia cuando intente cerrarla. En su controlador Ajax complete, elimine el modal y luego reemplace los datos.

Si eso no funciona, siempre puedes obligarlo a desaparecer haciendo lo siguiente:

$(''#your-modal-id'').modal(''hide'');
$(''body'').removeClass(''modal-open'');
$(''.modal-backdrop'').remove();

Answer 5

Asegúrese de que no está utilizando el mismo elemento Id / class en otro lugar, para un elemento no relacionado con el componente modal.

Es decir ... si está identificando sus botones que activan las ventanas emergentes modales con el nombre de clase ''myModal'', asegúrese de que no haya elementos no relacionados que tengan el mismo nombre de clase.

Answer 6

Asegúrese de que su llamada inicial a $.modal() para aplicar el comportamiento modal no está pasando más elementos de los que esperaba. Si esto sucede, terminará creando una instancia modal, completa con el elemento de fondo, para CADA elemento de la colección. En consecuencia, puede parecer que el telón de fondo se ha quedado atrás, cuando en realidad estás mirando uno de los duplicados.

En mi caso, estaba intentando crear el contenido modal sobre la marcha con un código como este:

myModal = $(''<div class="modal">...lots of HTML content here...</div><!-- end modal -->'');
$(''body'').append(myModal);
myModal.modal();

Aquí, el comentario HTML después de la etiqueta de cierre </div> significaba que myModal era en realidad una colección jQuery de dos elementos: el div y el comentario. Ambos se convirtieron obedientemente en modales, cada uno con su propio elemento de fondo. Por supuesto, el modal hecho del comentario era invisible aparte del telón de fondo, así que cuando cerré el modal real (div) parecía que el fondo se había quedado atrás.

Answer 7

Desde https://github.com/twbs/bootstrap/issues/19385

Los métodos de mostrar / ocultar de Modal son asíncronos. Por lo tanto, código como:

foo.modal("hide"); bar.modal("show"); no es válido. Debe esperar a que se complete la visualización / ocultación (escuchando los eventos mostrados / ocultos; consulte http://getbootstrap.com/javascript/#modals-events ) antes de volver a llamar a los métodos mostrar u ocultar.

Tuve este problema cuando abrí el mismo modal dos veces demasiado rápido, por lo que una solución fácil fue verificar si ya se mostraba, para no mostrarlo nuevamente:

$(''#modalTitle'').text(...);
$(''#modalMessage'').text(...);
if($(''#messageModal'').is('':hidden'')){
    $(''#messageModal'').modal(''show'');
}

Answer 8

El valor inicial de su atributo de fondo de datos puede ser

"static", "true", "false".

estático y verdadero agrega la sombra modal, mientras que falso deshabilita la sombra, así que solo necesitas cambiar este valor con el primer clic en falso. Me gusta esto:

$(document).on(''ready'',function(){
 
 var count=0;
 
$(''#id-which-triggers-modal'').on(''click'',function(){
  
  if(count>0){
  
   $(this).attr(''data-backdrop'',''false'')
  }
  count++;
});


});

Answer 9

En ASP.NET, agregue una actualización para UpdatePanel en el código que está detrás del comando jquery. Ejemplo:

    ScriptManager.RegisterStartupScript(Page, Page.GetType(), "myModal", "$(''#myModal'').modal(''hide'');", true);
    upModal.Update();

Answer 10

En el proyecto .net MVC4 tuve la ventana emergente modal (bootstrap 3.0) dentro de un Ajax.BeginForm (OnComplete = "addComplete" [código extra eliminado]). Dentro del javascript "addComplete" tenía el siguiente código. Esto solucionó mi problema.

$ (''# moreLotDPModal''). hide ();

$ ("# moreLotDPModal"). data (''bs.modal''). isShown = false;

$ (''body''). removeClass (''modal-open'');

$ (''. modal-backdrop''). remove ();

$ (''# moreLotDPModal''). removeClass ("in");

$ (''# moreLotDPModal''). attr (''aria-hidden'', "true");

Answer 11

Esta solución es para Ruby on Rails 3.xy un archivo js.erb que reconstruye parte del DOM, incluido el modal. Funciona independientemente de si la llamada ajax vino desde el modal o desde una parte diferente de la página.

if ($("#my-modal").attr("aria-hidden") === "false") {
  $("#my-modal").modal(''hide'').on(''hidden.bs.modal'', function (event) {
    functionThatEndsUpDestroyingTheDOM();
  });
} else {
  functionThatEndsUpDestroyingTheDOM();
}

Gracias a @BillHuertas por el punto de partida.

Answer 12

Este problema también puede ocurrir si oculta y luego vuelve a mostrar la ventana modal con demasiada rapidez. Esto se mencionó en otra parte para su pregunta, pero a continuación daré algunos detalles.

El problema tiene que ver con el tiempo y la transición de desvanecimiento. Si muestra un modo antes de que se complete la transición de desaparición gradual para el modo anterior, verá este problema de fondo persistente (el fondo modal permanecerá en la pantalla, en su camino). Bootstrap explícitamente no admite múltiples modales simultáneos, pero esto parece ser un problema, incluso si el modal que está ocultando y el modal que está mostrando son los mismos.

Si esta es la razón correcta para su problema, aquí hay algunas opciones para mitigar el problema. La opción # 1 es una prueba rápida y fácil para determinar si el tiempo de transición de desvanecimiento es la causa de su problema.

1. Deshabilite la animación Fade para el modal (elimine la clase "fade" del cuadro de diálogo)
2. Actualice el texto modal en lugar de ocultarlo y volver a mostrarlo.
3. Corrija el tiempo para que no muestre el modal hasta que termine de ocultar el modal anterior. Usa los eventos modales para hacer esto. http://getbootstrap.com/javascript/#modals-events

Aquí hay algunos mensajes relacionados con el tema bootstrap tracker. Es posible que haya más publicaciones de seguimiento de las que he enumerado a continuación.

• https://github.com/twbs/bootstrap/issues/735
• https://github.com/twbs/bootstrap/issues/2839
• https://github.com/twbs/bootstrap/issues/19385

Answer 13

Estoy trabajando con Meteor y acabo de tener el mismo problema. La causa de mi error fue esta:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Como puede ver, agregué el modal en else, por lo tanto, cuando mi modal actualizó la información de contacto, tenía otro estado. Esto hizo que la plantilla modal quedara fuera del DOM justo antes de que se cerrara.

La solución: mover el modal fuera de if-else:

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}

Answer 14

Incluso me encontré con un problema similar, tenía los siguientes dos botones

<button id="confirm-delete-btn" >Yes, Delete this note.</button>
<button id="confirm-delete-cancel" data-dismiss="modal">No</button>

Quería realizar alguna operación de ajax y, en caso de que la operación de ajax fuera exitosa, cierre el modal. Así que aquí está lo que hice.

$.ajax({
        url: ''/ABC/Delete/'' + self.model.get("Id")
            , type: ''DELETE''
            , success: function () {                    
                setTimeout(function () {
                    self.$("#confirm-delete-cancel").trigger("click");
                }, 1200);
            }
            , error: function () {}
        });

Activé el evento de clic del botón ''No'' que tenía la propiedad data-dismiss="modal" . Y esto funcionó :)

Answer 15

Inserta en tu botón de acción esto:

data-backdrop="false"

y

data-dismiss="modal" 

ejemplo:

<button type="button" class="btn btn-default" data-dismiss="modal">Done</button>

<button type="button" class="btn btn-danger danger" data-dismiss="modal" data-backdrop="false">Action</button>

Si ingresa esta información, no aparecerá el telón de fondo .modal. documentación al respecto en este enlace: http://getbootstrap.com/javascript/#modals-usage

Answer 16

Otro posible error que podría producir este problema,

¡Asegúrese de no haber incluido el script bootstrap.js más de una vez en su página!

Answer 17

Otro punto de vista a esta pregunta. (Estoy usando la versión bootstrap.js 3.3.6)

Me equivoqué inicializando modal tanto manualmente en javascript:

$(''#myModal'').modal({
   keyboard: false
})

y usando

data-toggle="modal"

en este botón como ejemplo a continuación (mostrado en el documento)

<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>

por lo que el resultado es crear dos instancias de

<div class="modal-backdrop fade in"></div>

adjuntar al cuerpo de mi html al abrir el modal. Esta puede ser la causa al cerrar el modal mediante la función:

$(''#myModal'').modal(''hide'');

elimina solo una instancia de fondo (como se muestra arriba) para que el fondo no desaparezca. Pero desapareció si usas data-dismiss="modal" add en html como se muestra en bootstrap doc.

Por lo tanto, la solución a mi problema es que solo inicialice el modal manualmente en javascript y no use el atributo de datos. De esta manera, puedo cerrar el modal manualmente y usar las características data-dismiss="modal" .

Espero que esto ayude si encontraste el mismo problema que yo.

Answer 18

Para tu información, en caso de que alguien se tope con esto todavía ... Pasé aproximadamente 3 horas para descubrir que la mejor manera de hacerlo es la siguiente:

$("#my-modal").modal("hide");
$("#my-modal").hide();
$(''.modal-backdrop'').hide();
$("body").removeClass("modal-open");

Esa función para cerrar el modal es muy poco intuitiva.

Answer 19

Problema del panel de actualización.

Mi problema se debió a la colocación del panel de actualización. Tenía el modal completo en el panel de actualización. Si declara el modal fuera del panel de actualización y acaba de decir, el cuerpo modal, en el panel de actualización, luego el $ (''# myModalID''). Modal (''hide''); trabajó.

Answer 20

Prueba esto

$(''#something_clickable'').on(''click'', function () {
  $("#my_modal").modal("hide");
  $("body").removeClass("modal-open");
  $(''.modal-backdrop'').remove();
 });

Funciona bien para mí.

Answer 21

Sé que esta es una publicación muy antigua, pero esto podría ayudar. Esta es una solución muy pequeña por mí

$(''#myModal'').trigger(''click'');

Eso es, esto debería resolver el problema.

Answer 22

Si está utilizando una copia y pegue desde el sitio de getboostrap en un selector html generado, asegúrese de eliminar el comentario ''<! - /.modal ->''. Bootstrap se confunde y piensa que el comentario es un segundo elemento modal. Crea otro back drop para este "segundo" elemento.

Answer 23

Sufrí un problema similar: en mi ventana modal, tengo dos botones, "Cancelar" y "Aceptar". Originalmente, ambos botones cerrarían la ventana modal invocando $(''#myModal'').modal(''hide'') (con "OK" ejecutando algún código anteriormente) y el escenario sería el siguiente:

1. Abrir la ventana modal
2. Haga algunas operaciones, luego haga clic en "Aceptar", valide y cierre el modal
3. Abre el modal de nuevo y cierra haciendo clic en "Cancelar"
4. Vuelva a abrir el modal, haga clic nuevamente en "Cancelar" ==> ¡el telón de fondo ya no es accesible!

bueno, mi siguiente mesa me guardó el día: en lugar de invocar $(''#myModal'').modal(''hide'') , $(''#myModal'').modal(''hide'') sus botones el atributo data-dismiss="modal" y agregue un evento "clic" a su " Botón de enviar. En mi problema, el código HTML (bueno, TWIG) para el botón es:

<button id="modal-btn-ok" class="btn" data-dismiss="modal">OK</button>
<button id="modal-btn-cancel" class="btn" data-dismiss="modal">Cancel</button>

y en mi código JavaScript, tengo:

$("#modal-btn-ok").one("click", null, null, function(){
    // My stuff to be done
});

mientras que ningún evento de "clic" se atribuye al botón "Cancelar". El modal ahora se cierra correctamente y me permite jugar nuevamente con la página "normal". En realidad, parece que data-dismiss="modal" debería ser la única forma de indicar que un botón (o cualquier elemento DOM) debe cerrar un modal Bootstrap. El .modal(''hide'') parece comportarse de una manera no bastante controlable.

¡Espero que esto ayude!

Answer 24

Tuve el problema de la congelación de la pantalla de fondo modal, pero en un escenario ligeramente diferente: cuando se mostraban 2 modales espalda con espalda. por ejemplo, el primero solicitaría confirmación para hacer algo y, después de hacer clic en el botón "confirmar", la acción presentaría un error y se mostraría el segundo modal para mostrar el mensaje de error. El segundo telón de fondo modal congelaría la pantalla. No hubo choques en los nombres de clase o id de los elementos.

La forma en que se solucionó el problema era darle al navegador tiempo suficiente para lidiar con el telón de fondo modal. En lugar de tomar la acción inmediatamente después de hacer clic en "confirmar", indique al navegador 500 ms para ocultar el primer modo y limpiar el fondo, etc. Luego, realice la acción que terminará mostrando el modo de error.

<button type="button" class="btn btn-red" data-dismiss="modal" on-tap="_dialogConfirmed">Confirm</button>
...

La función _dialogConfirmed () tiene el siguiente código:

    var that = this;

    setTimeout(function () {
      if (that.confirmAction) {
        (that.confirmAction)();
        that.confirmAction = undefined;
      }
    }, 500);

Supongo que las otras soluciones funcionaron porque tomaron suficiente tiempo adicional para darle al navegador el tiempo de limpieza necesario.

Answer 25

Tuve este mismo problema

Sin embargo, estaba usando bootbox.js, así que podría haber tenido algo que ver con eso.

De cualquier manera, me di cuenta de que el problema estaba siendo causado por tener un elemento con la misma clase que su padre. Cuando uno de estos elementos se utiliza para vincular una función de clic para mostrar el modal, entonces se produce el problema.

es decir, esto es lo que causa el problema:

<div class="myElement">
    <div class="myElement">
        Click here to show modal
    </div>
</div>

cámbielo para que el elemento sobre el que se haga clic no tenga la misma clase que su padre, ninguno de sus hijos o cualquier otro ancestro. Probablemente sea una buena práctica hacer esto en general al vincular las funciones de clic.

Answer 26

Tuve un problema similar. Estaba usando Boostrap junto con Backbone, y estaba capturando clics del botón "Hazlo" y luego deteniendo la propagación de esos eventos. Curiosamente, esto hizo que el modal desapareciera, pero no el fondo. Si llamo event.preventDefault () pero no llamo a stopPropagation (), todo funciona bien.

Answer 27

Usando toggle en lugar de hide, resolví mi problema

Answer 28

Yo tuve el mismo problema. Descubrí que se debía a un conflicto entre Bootstrap y JQueryUI.

Ambos usan la clase "cerrar". Cambiar la clase en uno u otro arregla esto.

Answer 29

utilizar:

$(''.modal.in'').modal(''hide'') 

Source

Answer 30

//Create modal appending on body
myModalBackup = null;
$(''#myModal'').on(''hidden.bs.modal'', function(){
       $(''body'').append(myModalBackup.clone());
    myModalBackup = null;
});

//Destroy, clone and show modal
myModalBackup = $(''#myModal'').clone();
myModalBackup.find(''.modal-backdrop'').remove();
$(''#myModal'').modal(''hide'').remove();
myModalBackup.find(''.info1'').html(''customize element <b>1</b>...'');
myModalBackup.find(''.info2'').html(''customize element <b>2</b>...'');                             
myModalBackup.modal(''show'');

violín -> https://jsfiddle.net/o6th7t1x/4/