El fondo modal de arranque de Twitter no desaparece

260

Estoy usando el diálogo modal de arranque 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 fondo modal no desaparece. El cuadro de diálogo modal desaparece correctamente, pero en su lugar permanece "modal-backdrop in" que crea la opacidad en la pantalla

¿Que puedo hacer?

paganotti
fuente
55
Estas usando $('#myModal').modal('hide')? ¿Puedes poner un código aquí?
Pigueiras
20
Si está utilizando una copia y pega desde el sitio getboostrap en un selector generado por HTML, asegúrese de eliminar el comentario '<! - /.modal ->'. Bootstrap se confunde y piensa que el comentario es un segundo elemento modal. Crea otra caída hacia atrás para este "segundo" elemento.
Jordan
@ Jordania: ¡Tu comentario debe ser una respuesta! ¡En mi caso, tu comentario fue la solución correcta!
BlaM
Consulte lo siguiente: stackoverflow.com/questions/22207377/…
Nutan
Sé que la pregunta es antigua, pero hoy tengo un problema similar, en mi situación hubo una eliminación errónea de la clase "modal-lg" que se dejó solo a "modal" creando desorden cuando iba a cerrar el modal sin el teclado / clic en algún lugar afuera.
Matteo

Respuestas:

550

Asegúrese de no reemplazar el contenedor que contiene la ventana modal real cuando realiza la solicitud AJAX, porque Bootstrap no podrá encontrar una referencia cuando intente cerrarlo. En su controlador Ajax completo, elimine el modal y luego reemplace los datos.

Si eso no funciona, siempre puede forzarlo a desaparecer haciendo lo siguiente:

$('#your-modal-id').modal('hide');
$('body').removeClass('modal-open');
$('.modal-backdrop').remove();
ChezFre
fuente
16
Daría esta respuesta +2 si pudiera. ¡Solo me salvó horas!
Andre Lombaard
9
Ocultar el modal antes de la llamada AJAX es una solución deficiente si necesita evaluar la respuesta AJAX y actualizar el modal en consecuencia.
asciimo
19
Creo que esto también puede ser causado al llamar modal ('ocultar') antes de que la animación de fundido se haya completado por completo. Eliminar la clase de desvanecimiento del modal puede ayudar.
EvilPuppetMaster
77
$ ('. modal-backdrop'). remove (); resuelto por mí, no hay necesidad de quitar la clase fade
Omar S.
34
$('.modal-backdrop').remove()parece romper futuros modales abriéndose correctamente.
krock
65

Asegúrese de que su llamada inicial $.modal()para aplicar el comportamiento modal no pase más elementos de los que pretendía. Si esto sucede, terminará creando una instancia modal, completa con un elemento de fondo, para CADA elemento de la colección. En consecuencia, puede parecer que el fondo se ha quedado atrás, cuando en realidad estás viendo 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 </div>etiqueta de cierre 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 fondo, así que cuando cerré el modal real (el div) parecía que el fondo se había quedado atrás.

gasman
fuente
16
Este chico estaba en el dinero. Eliminé los comentarios de un modal que recibía con $ .html () y ahora funciona. Freakin 'raro.
Matrym
2
Este fue el problema para mí también.
Bob Black
66
Estúpido arranque! Su propio marcado de ejemplo (con los comentarios al inicio y al final) rompe este paradigma. ¡Elimina el comentario y funciona!
goofballLogic
Igual que aquí. Eliminar los comentarios resolvió el problema. Solo una pregunta. Veo que el modal funciona perfectamente sin agregarlo al DOM con $ ('body'). Append (myModal). ¿Es necesario agregar el modal a la página DOM?
VictorEspina
Tenía una etiqueta no coincidente. Mismo resultado. ¡Gracias!
jozxyqk
51

Acabo de pasar demasiado tiempo en este problema :)

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

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

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

Cuando luego reemplaza un montón de HTML como resultado de la solicitud AJAX, los eventos de ocultación modal no finalizan. 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 útil!

Bill Huertas
fuente
15
¡Pasé demasiado tiempo también! Esta respuesta me dio la pista: algo golpeaba mi DOM (angular). Mirando el código de arranque, puede forzar una eliminación inmediata del fondo eliminando primero la clase de desvanecimiento:$('#myModal').removeClass('fade');$(myModal').modal('hide')'
Ross R
Debería ser la respuesta aceptada: utiliza la API de bootstrap según lo previsto y no piratea el cuerpo con .modal-open
Aaron Hudon
Esta es la respuesta más diligente y concienzuda.
JacobIRR
Gran respuesta, mi problema también se debió a una llamada ajax que reemplazó al dom.
Michael Harper
la declaración de que los eventos de ocultación modal no terminan me dio la idea de cómo comenzar mi trabajo
SamuelDev
32

Inserte en su 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 este atributo de datos, no aparecerá el telón de fondo .modal. documentación al respecto en este enlace: http://getbootstrap.com/javascript/#modals-usage

kampageddon
fuente
2
Esta es una verdadera respuesta. Bajo ninguna circunstancia intente hacer manualmente las cosas que Bootstrap pretende hacer. Si esa sería tu solución, la estás implementando mal. Creo que el HTML repetitivo en el sitio de bootstrap está un poco incompleto y es por eso que muchas personas están experimentando el comportamiento descrito (incluido yo). ¡Gracias! +1
Ben Fransen
3
¿Qué pasa si desea activar el modal no desde un botón?
shinzou
77
@ben te equivocas. data-backdrop="false"es simplemente una opción que le dice a bootstrap que no use ningún fondo . Esto no tiene nada que ver con el problema real, solo lo evita. Sería como decir "No puedo nadar, así que dejé de meterme en la piscina". Eso es genial, pero aún no puedes nadar y si tu jefe te tira al fondo, te ahogarás. Hay muchos casos en los que se requiere intervención manual, como cuando Angular pisa fuerte el DOM en el fondo de su aplicación.
Wesley Smith
18

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

Jordán
fuente
Estaré condenado ... este era exactamente mi problema. Eliminó el comentario y funcionó. ¿Cómo diablos un comentario HTML hace tropezar Bootstrap?
Turner Hayes
Creo que está buscando elementos html para contar. Como los comentarios se consideran elementos, este conteo está mal con ese comentario en su lugar.
Jordania
me pasó mientras tenía este archivo en la plantilla de bigote
Pavel 'PK' Kaminsky
Los comentarios existen en el DOM de tal manera que confunde la mitad de JavaScript del componente modal. Olvidé exactamente cómo. Esto fue hace un tiempo.
Jordan
Holy Moley, ¡eso realmente funciona! Ese es un error tan extraño.
Dror S.
14

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

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

Eso es todo, esto debería resolver el problema

Chaitanya Bankanhal
fuente
1
Esto funcionó perfectamente para mí. Usando bootstrap 4 aquí.
Eddie Teixeira
1
Esta debería ser la respuesta predeterminada. Gracias
Makamu Evans
¿Qué se myModalsupone que es? ¿Y por qué cerraría el diálogo? Los cuadros de diálogo modales solo se cierran haciendo clic en el botón Cerrar o haciendo clic fuera del cuadro de diálogo. Esto no parece ser una solución.
MushyPeas
¿Qué se supone que es miModal? -> Es el id del modal principal. ¿Y por qué cerraría el diálogo? -> Funciona porque, de manera predeterminada, cuando hace clic fuera del modal, la acción se propaga a su padre y se maneja allí.
Chaitanya Bankanhal
9

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 previamente algún código) y el escenario sería el siguiente:

  1. Abre la ventana modal
  2. Realice algunas operaciones, luego haga clic en "Aceptar" para validarlas y cerrar el modal
  3. Abra el modal nuevamente y descarte haciendo clic en "Cancelar"
  4. Vuelva a abrir el modal, haga clic nuevamente en "Cancelar" ==> ¡el fondo ya no es accesible!

bueno, mi compañero de escritorio siguiente me salvó el día: en lugar de invocar $('#myModal').modal('hide'), asigne a sus botones el atributo data-dismiss="modal"y agregue un evento "clic" a su botón "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 volver a jugar 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) debería cerrar un modal de Bootstrap. El .modal('hide')método parece comportarse de una manera poco controlable.

¡Espero que esto ayude!

Dima Gabachov
fuente
Lo mismo aquí, ¿qué pasa si no desea activar el modal desde un botón?
shinzou
9

Este problema también puede ocurrir si oculta y luego vuelve a mostrar la ventana modal demasiado rápido. Esto se mencionó en otra parte para preguntas, pero proporcionaré más detalles a continuación.

El problema tiene que ver con el tiempo y la transición de desvanecimiento. Si muestra un modal antes de que se complete la transición de desvanecimiento para el modal 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 de su problema, aquí hay algunas opciones para mitigar el problema. La opción n. ° 1 es una prueba rápida y fácil para determinar si el tiempo de transición de desvanecimiento es realmente la causa de su problema.

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

Aquí hay algunas publicaciones relacionadas con el rastreador de problemas de arranque. Es posible que haya más publicaciones de rastreadores de las que he enumerado a continuación.

Mark F Guerra
fuente
8

.modal ('ocultar')

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

Entonces 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, debe esperar hasta que finalice el evento "ocultar".

Helmut Hackl
fuente
Esta es definitivamente una mejor solución. De esta manera, no tiene que meterse con las clases modales, que es probablemente la forma más correcta de solucionar este problema.
DeanMWake
6

Otro posible error que podría producir este problema,

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

Webinan
fuente
5

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 ajax y, en caso de éxito de esa operación, cerrar 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 data-dismiss="modal"propiedad. Y esto funcionó :)

Yasser Shaikh
fuente
La activación manual del evento de clic no cierra el modal en IE9 / IE10 para mí. Tratando de encontrar una solución.
Antony Harder
No importa, el problema era un poco diferente: tenía la condición de habilitación de datos adjunta a ese botón, y aunque IE procedió con los eventos onclick, no tuvo en cuenta el atributo de descarte de datos.
Antony Harder
5

utilizar:

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

Fuente

Jamshid Hashimi
fuente
3

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 del modal o de 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.

mindriot
fuente
3

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

Esto funcionó para mí. No se cierra porque cuando abres la ventana emergente, se activan 2 o 3 fondos de fondo modales. Entonces, cuando haces $ ('# myModal')). Modal ('hide'); solo afecta a un fondo modal y queda el resto.

Ashhab
fuente
2

problema del panel de actualización.

Mi problema se debió a la ubicación del panel de actualización. Tenía todo el modal en el panel de actualización. Si declara el modal fuera del panel de actualización y solo tiene que decir, el cuerpo modal, en el panel de actualización, entonces el $ ('# myModalID'). Modal ('hide'); trabajó.

Opción Al
fuente
Este fue mi problema. Tenía un AjaxManager creando paneles de actualización alrededor de mi control de usuario que contenía todo el modal. Dejé solo el cuerpo del modal en el control del usuario y moví todo en la página principal y todo comenzó a funcionar como se esperaba, ¡así que no ajaxifique su parte <div id = "# mymodal">!
AlexanderD
2

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

Me equivoqué al inicializar modal tanto manualmente en javascript:

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

y usando

data-toggle="modal"

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

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

así que el resultado es crear dos instancias de

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

agregar al cuerpo de mi html cuando abra el modal. Esta puede ser la causa al cerrar el modal utilizando 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 usa data-dismiss="modal"add on html como se muestra en el documento de bootstrap.

Entonces, la solución a mi problema es inicializar modal solo manualmente en javascript y no usar el atributo de datos. De esta manera, puedo cerrar el modal manualmente y usando data-dismiss="modal"características.

Espero que esto ayude si te encuentras con el mismo problema que yo.

ohm89
fuente
2

Para su información, en caso de que alguien todavía se encuentre con esto ... He pasado alrededor de 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.

Nick M
fuente
Trabajado como un encanto.
Pattu
2

Agregar data-dismiss="modal"cualquier botón en mi modal funcionó para mí. Quería que mi botón llamara a una función con angular para disparar una llamada ajax Y cerrar el modal, así que agregué un .toggle()dentro de la función y funcionó bien. (En mi caso usé ay bootstrap modalusé algunos angular, no un controlador modal real).

<button type="button" class="btn btn-primary" data-dismiss="modal"
ng-click="functionName()"> Do Something </button>

$scope.functionName = function () {
angular.element('#modalId').toggle();
  $.ajax({ ajax call })
}
wendyg
fuente
1

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.

Matthew Andrianakos
fuente
1

Usando alternar en lugar de ocultar, resolvió mi problema

Yash K
fuente
1
comparte una posible respuesta (ejemplo). Ayudará a otros a entender bien
Sachith Muhandiram
1

Asegúrese de no utilizar el mismo elemento Id / clase 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 utilizando el nombre de clase 'myModal', asegúrese de que no haya elementos no relacionados que tengan el mismo nombre de clase.

usuario2707674
fuente
1

Después de aplicar la solución mejor calificada, tuve el problema de que rompe los modales futuros abriéndose correctamente. He encontrado mi solución que funciona bien

        element.on("shown.bs.modal", function () {
            if ($(".modal-backdrop").length > 1) {
                $(".modal-backdrop").not(':first').remove();
            }
            element.css('display', 'block');
        });
Rez
fuente
1

Tuve el mismo problema al intentar enviar el formulario. La solución fue cambiar el tipo de botón de submita buttony luego controlar el evento de clic de botón, así:

'click .js-save-modal' () {
    $('#myFormId').submit();
    $('#myModalId').modal('hide');
}
sym
fuente
0

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 resolvió mi problema.

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

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

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

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

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

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

JenonD
fuente
0

Tuve este mismo problema.

Sin embargo, estaba usando bootbox.js, por lo 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 usa para enlazar 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 en el que se hace clic no tenga la misma clase que su padre, cualquiera de sus hijos o cualquier otro antepasado. Probablemente sea una buena práctica hacer esto en general cuando se vinculan las funciones de clic.

Vin
fuente
0

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 lo demás, por lo que cuando mi modal actualizó la información de contacto, si tenía otro estado. Esto provocó que la plantilla modal quedara fuera del DOM justo antes de que se cerrara.

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

{{#if tourmanager}}
    {{>contactInformation tourmanager}}
{{else}}
    <a href="#addArtistTourmanagerModal" data-toggle="modal"><i class="fa fa-plus"></i> Tourmanager toevoegen</a>
    {{>addArtistTourmanagerModal}}
{{/if}}
Scuba Kay
fuente
0
//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/

Fábio Zangirolami
fuente
0

el valor inicial de su atributo de telón de fondo de datos puede ser

"estático", "verdadero", "falso".

static y true agregan la sombra modal, mientras que false deshabilita la sombra, por lo que solo necesita 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++;
});


});

Alejandro Quintero
fuente
0

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

La forma en que se solucionó el problema fue darle al navegador suficiente tiempo para lidiar con el fondo modal. En lugar de tomar la acción inmediatamente después de hacer clic en 'confirmar', dele al navegador 500ms para ocultar el primer modal y limpiar el fondo, etc., y luego realice la acción que terminaría mostrando el modal 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 extra para darle al navegador el tiempo de limpieza necesario.

Behnam
fuente
0

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

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