Twitter bootstrap modal-background non scompare

Sto usando la finestra di dialogo modale del bootstrap di Twitter. Quando faccio clic sul pulsante di invio della finestra di dialogo modale bootstrap, invia una richiesta AJAX. Il mio problema è che lo sfondo modale non scompare. La finestra di dialogo modale scompare correttamente, ma rimane invece "sfondo modale in" che crea l'opacità sullo schermo

Cosa posso fare?

Assicurati di non sostituire il contenitore contenente la finestra modale effettiva quando esegui la richiesta AJAX, poiché Bootstrap non sarà in grado di trovare un riferimento ad esso quando proverai a chiuderlo. Nel tuo gestore Ajax completo rimuovere il modale e quindi sostituire i dati.

Se il problema persiste, puoi sempre forzarlo ad andare via nel modo seguente:

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

Assicurati che la tua chiamata iniziale $.modal()per applicare il comportamento modale non passi più elementi del previsto. In questo caso, finirà per creare un'istanza modale, completa di elemento di sfondo, per OGNI elemento nella raccolta. Di conseguenza, potrebbe sembrare che lo sfondo sia stato lasciato indietro, quando in realtà stai guardando uno dei duplicati.

Nel mio caso, stavo tentando di creare il contenuto modale al volo con un codice come questo:

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

Qui, il commento HTML dopo il </div>tag di chiusura significava che myModal era in realtà una raccolta jQuery di due elementi: il div e il commento. Entrambi furono diligentemente trasformati in modali, ognuno con il proprio elemento di sfondo. Ovviamente, il modale ricavato dal commento era invisibile a parte lo sfondo, quindi quando ho chiuso il vero modale (il div) sembrava che lo sfondo fosse lasciato indietro.

Ho appena trascorso troppo tempo su questo problema :)

Mentre le altre risposte fornite sono utili e valide, mi è sembrato un po 'confuso ricreare efficacemente la funzionalità di nascondimento modale da Bootstrap, quindi ho trovato una soluzione più pulita.

Il problema è che ci sono una catena di eventi che accadono quando chiami

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

Quando poi sostituisci un gruppo di HTML come risultato della richiesta AJAX, gli eventi nascosti modali non finiscono. Tuttavia, Bootstrap attiva un evento quando tutto è finito e puoi agganciarlo in questo modo:

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

Spero sia utile!

Inserisci nel tuo pulsante di azione questo:

data-backdrop="false"

e

data-dismiss="modal" 

esempio:

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

se si immette questo dato attr, lo sfondo .modal non apparirà. documentazione al riguardo a questo link: http://getbootstrap.com/javascript/#modals-usage

Se stai usando una copia e incolla dal sito getboostrap stesso in un selettore generato html, assicurati di rimuovere il commento '<! - /.modal ->'. Bootstrap si confonde e pensa che il commento sia un secondo elemento modale. Crea un altro drop back per questo "secondo" elemento.

So che questo è un post molto vecchio ma questo potrebbe aiutare. Questa è una soluzione molto piccola da parte mia

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

Ecco, questo dovrebbe risolvere il problema

Ho riscontrato un problema simile: nella mia finestra modale, ho due pulsanti, "Annulla" e "OK". Inizialmente, entrambi i pulsanti chiudevano la finestra modale invocando $('#myModal').modal('hide')(con "OK" precedentemente eseguendo un codice) e lo scenario sarebbe il seguente:

1. Apri la finestra modale
2. Effettua alcune operazioni, quindi fai clic su "OK" per convalidarle e chiudere il modale
3. Apri di nuovo il modale e scartalo facendo clic su "Annulla"
4. Riapri il modale, fai di nuovo clic su "Annulla" ==> lo sfondo non è più accessibile!

bene, il mio collega della prossima scrivania mi ha salvato la giornata: invece di invocare $('#myModal').modal('hide'), dai ai tuoi pulsanti l'attributo data-dismiss="modal"e aggiungi un evento "click" al tuo pulsante "Invia". Nel mio problema, il codice HTML (bene, TWIG) per il pulsante è:

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

e nel mio codice JavaScript, ho:

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

mentre nessun evento "click" è attribuito al pulsante "Annulla". Il modale ora si chiude correttamente e mi permette di giocare di nuovo con la pagina "normale". In realtà sembra che data-dismiss="modal"dovrebbe essere l'unico modo per indicare che un pulsante (o qualunque elemento DOM) dovrebbe chiudere un modale Bootstrap. Il .modal('hide')metodo sembra comportarsi in un modo non del tutto controllabile.

Spero che questo ti aiuti!

Questo problema può verificarsi anche se si nasconde e si mostra nuovamente la finestra modale troppo rapidamente. Questo è stato menzionato altrove per una domanda, ma fornirò alcuni dettagli di seguito.

Il problema ha a che fare con il tempismo e la transizione di dissolvenza. Se mostri un modale prima che la transizione di dissolvenza per il precedente modale sia completa, vedrai questo persistente problema di sfondo (lo sfondo modale rimarrà sullo schermo, a modo tuo). Bootstrap esplicitamente non supporta più modali simultanei, ma questo sembra essere un problema anche se il modale che stai nascondendo e il modale che stai mostrando sono gli stessi.

Se questo è il motivo corretto del problema, ecco alcune opzioni per mitigare il problema. L'opzione n. 1 è un test rapido e semplice per determinare se i tempi di transizione della dissolvenza sono effettivamente la causa del problema.

1. Disabilita l'animazione Fade per il modale (rimuovi la classe "fade" dalla finestra di dialogo)
2. Aggiorna il testo del modale invece di nasconderlo e mostrarlo nuovamente.
3. Correggi i tempi in modo che non mostrino il modale fino a quando non ha finito di nascondere il modale precedente. Usa gli eventi modali per farlo. http://getbootstrap.com/javascript/#modals-events

Ecco alcuni post relativi al tracker dei problemi relativi al bootstrap. È possibile che ci siano più post tracker di quelli elencati di seguito.

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

.modal ( 'nascondere')

Nasconde manualmente un modale. Ritorna al chiamante prima che il modale sia stato effettivamente nascosto (ovvero prima che si verifichi l'evento hidden.bs.modal).

Quindi invece di

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

fare

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

Quindi sei sicuro di aspettare fino al termine dell'evento "nascondi".

Un altro possibile errore che potrebbe causare questo problema,

Assicurati di non aver incluso lo bootstrap.jsscript più di una volta nella tua pagina!

Anche se ho riscontrato un problema simile, avevo i seguenti due pulsanti

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

Volevo eseguire alcune operazioni Ajax e al successo di quell'operazione Ajax chiudere il modale. Quindi ecco cosa ho fatto.

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

Ho attivato l'evento click del pulsante "No" che aveva la data-dismiss="modal"proprietà. E questo ha funzionato :)

uso:

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

fonte

Questa soluzione è per Ruby on Rails 3.xe un file js.erb che ricostruisce parte del DOM incluso il modale. Funziona indipendentemente dal fatto che la chiamata ajax provenga dal modale o da una parte diversa della pagina.

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

Grazie a @BillHuertas per il punto di partenza.

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

Questo ha funzionato per me. Non si chiude perché quando si apre il popup innesca 2 o 3 fondali modali. Quindi quando fai $ ('# myModal')). Modal ('hide'); ha effetto solo su uno sfondo modale e il resto rimane.

problema updatepanel.

Il mio problema era dovuto al posizionamento del pannello di aggiornamento. Ho avuto l'intero modale nel pannello di aggiornamento. Se dichiarate il modale al di fuori del pannello di aggiornamento e dite semplicemente, il corpo modale, nel pannello di aggiornamento, quindi $ ('# myModalID'). Modal ('hide'); lavorato.

Un altro punto di vista a questa domanda. (Sto usando la versione 3.3.6 di bootstrap.js)

Ho sbagliato a inizializzare modale sia manualmente in javascript:

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

e usando

data-toggle="modal"

in questo pulsante come nell'esempio seguente (mostrato nel documento)

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

quindi il risultato è creare due istanze di

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

aggiungo al corpo del mio html quando apro il modale. Questa può essere la causa quando si chiude il modale usando la funzione:

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

rimuove solo un'istanza di sfondo (come mostrato sopra) in modo che lo sfondo non scompaia. Ma è scomparso se usi data-dismiss="modal"add on html come mostrato nel documento bootstrap.

Quindi la soluzione al mio problema è inizializzare il modale solo manualmente in javascript e non usando l'attributo data, in questo modo posso sia chiudere il modale manualmente sia usando le data-dismiss="modal"funzionalità.

Spero che questo possa aiutarti se hai riscontrato lo stesso problema.

Cordiali saluti nel caso qualcuno si imbatte in questo ancora ... Ho trascorso circa 3 ore a scoprire che il modo migliore per farlo è il seguente:

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

Questa funzione per chiudere il modale non è molto intuitiva.

L'aggiunta di data-dismiss="modal"qualsiasi pulsante nel mio modale ha funzionato per me. Volevo che il mio pulsante chiamasse una funzione angolare per lanciare una chiamata Ajax E chiudere il modale, quindi ho aggiunto una .toggle()funzione all'interno e ha funzionato bene. (Nel mio caso ho usato un bootstrap modale usato alcuni angular, non un vero controller modale).

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

Ho avuto lo stesso problema. Ho scoperto che era a causa di un conflitto tra Bootstrap e JQueryUI.

Entrambi usano la classe "close". La modifica della classe nell'una o nell'altra risolve questo problema.

Usando toggle invece di hide, ho risolto il mio problema

Assicurati di non utilizzare lo stesso elemento ID / classe altrove, per un elemento non correlato al componente modale.

Cioè ... se stai identificando i tuoi pulsanti che attivano i popup modali usando il nome della classe "myModal", assicurati che non vi siano elementi non correlati con lo stesso nome di classe.

Dopo aver applicato la soluzione più votata ho avuto un problema che interrompe l'apertura dei modali futuri. Ho trovato la mia soluzione che funziona bene

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

Ho avuto lo stesso problema quando ho provato a inviare il modulo. La soluzione è stata quella di cambiare il tipo di pulsante da submita buttone quindi gestire l'evento di clic del pulsante in questo modo:

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

Nel progetto .net MVC4 ho avuto il pop-up modale (bootstrap 3.0) all'interno di un Ajax.BeginForm (OnComplete = "addComplete" [codice aggiuntivo eliminato]). All'interno del javascript "addComplete" avevo il seguente codice. Questo ha risolto il mio problema.

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

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

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

. $ ( 'Modal-backdrop') rimuovere ();

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

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

Ho avuto questo stesso problema.

Comunque stavo usando bootbox.js, quindi avrebbe potuto essere qualcosa a che fare con quello.

Ad ogni modo, mi sono reso conto che il problema era causato dall'avere un elemento con la stessa classe del suo genitore. Quando uno di questi elementi viene utilizzato per associare una funzione clic per visualizzare il modale, si verifica il problema.

cioè questo è ciò che causa il problema:

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

cambiarlo in modo che l'elemento su cui si fa clic non abbia la stessa classe del suo genitore, nessuno dei suoi figli o altri antenati. Probabilmente è buona norma farlo in generale quando si associano le funzioni di clic.

Sto lavorando con Meteor e ho appena avuto lo stesso problema. La causa del mio bug era questa:

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

Come puoi vedere ho aggiunto il modale nell'altro, quindi quando il mio modale ha aggiornato le informazioni di contatto, se avesse un altro stato. Ciò ha fatto sì che il modello modale fosse lasciato fuori dal DOM poco prima che si chiudesse.

La soluzione: sposta il modale fuori dall'if-if:

{{#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');

violino -> https://jsfiddle.net/o6th7t1x/4/

il valore iniziale del tuo background di dati può essere

"statico", "vero", "falso".

static e true aggiungono l'ombra modale, mentre false disabilita l'ombra, quindi è sufficiente modificare questo valore con il primo clic su false. come questo:

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


});

Ho avuto il problema di congelamento dello schermo modale sullo sfondo ma in uno scenario leggermente diverso: quando venivano visualizzati 2 modali back to back. ad es. il primo chiederebbe la conferma per fare qualcosa e dopo aver cliccato il pulsante 'conferma', l'azione si imbatterà in un errore e il 2 ° modale verrà visualizzato per far apparire il messaggio di errore. Il secondo sfondo modale bloccherebbe lo schermo. Non ci sono stati scontri nei nomi di classe o ID degli elementi.

Il modo in cui il problema è stato risolto era quello di dare al browser abbastanza tempo per gestire lo sfondo modale. Invece di eseguire immediatamente l'azione dopo aver fatto clic su "conferma", dire al browser 500 ms per nascondere il 1 ° modale e ripulire lo sfondo, ecc. Quindi intraprendere l'azione che finirà per mostrare l'errore modale.

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

La funzione _dialogConfirmed () ha il seguente codice:

    var that = this;

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

Immagino che le altre soluzioni abbiano funzionato perché hanno impiegato abbastanza tempo extra per dare al browser il tempo necessario per la pulizia.

In ASP.NET, aggiungi un aggiornamento per UpdatePanel sul codice dietro il comando jquery. Esempio:

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