El fondo modal de arranque de Twitter no desaparece

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?

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();

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.

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!

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

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.

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

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!

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.

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

.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".

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!

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ó :)

utilizar:

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

Fuente

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.

$ ('# 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.

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ó.

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.

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.

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 })
}

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.

Usando alternar en lugar de ocultar, resolvió mi problema

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.

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');
        });

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');
}

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");

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.

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}}

//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/

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++;
});


});

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.

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();