Bootstrap modale visualizzato in background

576

Ho usato il codice per il mio modale direttamente dall'esempio Bootstrap e ho incluso solo bootstrap.js (e non bootstrap-modal.js). Tuttavia, il mio modale appare sotto la dissolvenza grigia (sfondo) e non è modificabile.

Ecco come appare:

nascondersi modale dietro lo sfondo

Vedi questo violino per un modo per riprodurre questo problema. La struttura di base di quel codice è così:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>
body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

Qualche idea sul perché questo sia o cosa posso fare per risolvere questo problema?

javascript  css  twitter-bootstrap  modal-dialog 
— natlines
fonte
Nel caso in cui qualcun altro cerchi da qualche tempo tag aperti, ecc. Cercando di capire perché questo sta accadendo, per me è stata l'estensione Chrome di Feedly che ha rotto i miei modali. La disabilitazione dell'estensione ha restituito un comportamento normale.
— tre
In tal caso il problema era su iOS e causato dall'applicazione overflow-x: hiddenal contenitore del modale.
— Idmean
1
Creato 3 esempi in 3 versioni. 3.3.1 funziona bene e gli altri no. Versione 3.3.1 jsfiddle Versione 3.3.5 jsfiddle Versione 3.3.6 jsfoddle
— Dimitry
1
Creato una segnalazione di bug con il team Bootstrap sembra che questo non sia davvero un bug, anche se ha funzionato bene in 3.3.1. Puoi leggere di più a riguardo nel link che ho pubblicato.
— Dimitry,
Un post sul blog rilevante per chiunque si trovi di fronte a questo problema weblog.west-wind.com/posts/2016/Sep/14/…

Risposte:

629

Se il contenitore modale ha una posizione fissa o relativa o si trova all'interno di un elemento con posizione fissa o relativa, si verificherà questo comportamento.

Assicurarsi che il contenitore modale e tutti i suoi elementi padre siano posizionati nel modo predefinito per risolvere il problema.

Ecco un paio di modi per farlo:

  1. Il modo più semplice è spostare il div modale in modo che sia esterno a qualsiasi elemento con posizionamento speciale. Un buon posto potrebbe essere proprio prima del tag body di chiusura </body>.
  2. In alternativa, puoi rimuovere le position:proprietà CSS dal modale e dai suoi antenati fino a quando il problema non scompare. Ciò potrebbe tuttavia modificare l'aspetto e il funzionamento della pagina.
— Muhd
fonte
24
Buona pesca. Cordiali saluti, non solo "risolto", la posizione del genitore "relativa" causa anche questo problema
— Giang Nguyen,
3
@Muhd come assicurati che esso e tutti i suoi elementi principali siano posizionati nel modo predefinito?
— indago
4
Preferisci usare l'opzione 1: "basta spostare il div modale in modo che sia esterno a qualsiasi elemento con posizionamento speciale". Thx
— mpgn,
9
Non capisco questa risposta. Gli esempi Bootstrap mostrano un div modale con un numero di classi lungo la linea di "modale", "modale-dissolvenza", ecc. All'interno .modale imposta la posizione: fissa, e all'interno del "corpo modale" imposta la posizione: relativa. Quindi, in che modo spostare il contenitore modale cambierà qualcosa quando .modal imposta la posizione: fissa?
— Carlos,
4
ho ancora questo problema. Lo aggiungo prima </body>e bodynon ho alcun attributo di positionstile. Qualche altra idea?
— Tuan Anh Tran,
383

Il problema ha a che fare con il posizionamento dei contenitori padre. Puoi facilmente "spostare" il tuo modale da questi contenitori prima di visualizzarlo. Ecco come farlo se stavi showutilizzando il tuo modale usando js:

$('#myModal').appendTo("body").modal('show');

Oppure, se avvii il modale usando i pulsanti, rilascia il .modal('show');e fai semplicemente:

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

Ciò manterrà tutte le normali funzionalità, consentendoti di mostrare il modale usando un pulsante.

— Adam Albright
fonte
12
Usa quel gestore di eventi generico per far funzionare la soluzione @leandrotk per tutte le modali che puoi avere in una pagina $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
— Patrick M.
2
@PatrickM. Sorprendente! che ha funzionato come un incantesimo su un vecchio progetto che sto subentrando e avevano modali dappertutto!
— denislexic,
5
Funziona alla grande quando non riesci davvero a correggere il posizionamento CSS. Grazie :)
— alexcasalboni,
C'è un motivo per cui perdo tutta la formattazione CSS quando lo faccio? E una soluzione semplice? :-)
— Eugene van der Merwe,
1
Dalla risposta leandrotk, basta cambiare #myModal in .modal in questo modo: $ ('. Modal'). AppendTo ("body"). Funzionerà con tutti i modali poiché hanno un modale di classe predefinito.
— Ngatia Frankline,
170

Ho provato tutte le opzioni fornite sopra ma non ho funzionato usando quelle.

Che cosa ha funzionato: impostare l'indice z dello sfondo .modal su -1.

.modal-backdrop {
  z-index: -1;
}
— Jan van der Burgt
fonte
10
Funzionava perfettamente ed è di gran lunga la soluzione più semplice. Ho usatoz-index: 0;
— andrewcockerham il
Posso anche confermare che solo questa opzione funziona! Grazie!
— Traghetto Kranenburg
Grazie! È un bug su BS3?
— mauriblint,
1
Questo non funziona se stai usando un tema che ha molti indici z diversi. Ad esempio, se si imposta lo sfondo per -1farlo apparire dietro altri elementi della pagina come i pannelli. Ma impostandolo per renderlo al di 3sopra di tutto tranne il popup modale.
— Justin Skiles,
1
Ho scoperto che questo è il metodo più veloce anche dopo aver esaurito i suggerimenti nelle risposte valutate più in alto. Nel mio caso, impostare il div con la classe del dialogo modale su un indice z di 1060 lo ha fatto scattare davanti alla sovrapposizione. Se usi la barra di navigazione, vorrai spostare il modale sopra la sovrapposizione e non viceversa, altrimenti la tua barra di navigazione potrebbe apparire sopra la sovrapposizione ... insulti nel caos ...
— Mike Devenney,
152

Inoltre, assicurati che la versione di BootStrap css e js siano le stesse. Diverse versioni possono anche far apparire modale in background:

Per esempio:

Cattivo:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

Buona:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
— Sid
fonte
Questo è stato anche per me. Grazie!
— Pedro Tanaka,
Ho appena avuto lo stesso problema, la stessa soluzione per fogli di stile versione sembra aver aiutato tutti! Grazie
— HGB,
Grazie, questo era il mio problema esatto
— Malcor,
Malcor nessun problema, ho passato molto tempo a capire questo bug. Come vediamo che era nel '14, ora è '16, il bug esiste ancora. In realtà questo non è un bug, ma in bootstrap gli autori dovrebbero aggiungere questo nella loro documentazione o qualcosa del genere.
— Sid
Lo stesso affare qui, siamo passati alla generazione del nostro SASS e ci siamo completamente dimenticati del file js stesso .. Questa deve essere la risposta migliore .. Poiché il nostro modale è sempre incluso di default appena prima del tag di chiusura del corpo ...
— Angry 84
116

Ho anche riscontrato questo problema e nessuna delle soluzioni ha funzionato per me fino a quando non ho capito che in realtà non ho bisogno di uno sfondo. Puoi rimuovere facilmente lo sfondo con il seguente codice.

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

Nota : ildata-backdrop attributo deve essere impostato su false( altre opzioni : statico true).

— PieterVK
fonte
2
Di gran lunga la soluzione più semplice e funziona come un fascino!
— learning_to_swim il
Brillante! Avevo anche bisogno di richiedere bootstrap - non so perché tutte le mie altre funzionalità Bootstrap funzionano bene, ma avevo bisogno di far funzionare modale.
— Steve Klein
Perfetto !!! lottato per un giorno .. e mi hai salvato un altro giorno. Grazie ancora .. +1 e saluti
— Bhaskara,
1
Dopo aver letto attentamente tutte le soluzioni, ho scoperto che questa è la più sensata della versione odierna di bootstrap e jQuery. Grazie.
— Crittografia,
3
Grazie! Questa domanda ha oltre 140.000 visualizzazioni e non capisco perché bootstrap non possa risolvere questo problema. oh bene, evviva.
— Chad,
58

L'ho fatto funzionare dando un alto valore di indice z alla finestra modale DOPO aprirla. Per esempio:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
— Andrew Dyster
fonte
Funziona (l'uomo dice che lo è), perché hai votato? Mentre sto guardando sembra che lo farà.
— Rolice,
Sì, qualcuno può spiegare perché questa è una cattiva risposta? È solo che è un po 'confuso?
— brandones,
6
Non capisco i voti negativi. Sì, è confuso, ma le altre soluzioni non hanno funzionato per me, quindi ho pensato di contribuire alle persone a cui non dispiace usare le soluzioni "hacky" per far funzionare la dannata cosa.
— Andrew Dyster,
Questa è stata un'intuizione rilevante per il mio problema specifico che ha posto un modale su un elemento a schermo intero. +1
— Jack Stone,
3
È una cattiva risposta perché è un hack e non fa alcun tentativo di indicarlo. Altre risposte dicono "se nient'altro funziona potresti ...". La realtà è che il modale è ampiamente utilizzato in tutto il Web e dovrebbe funzionare se implementato correttamente. Le risposte violente non aiutano le persone a capire come fare le cose nel modo corretto.
— Lukos,
35

La soluzione fornita da @Muhd è il modo migliore per farlo. Ma se sei bloccato in una situazione in cui cambiare la struttura della pagina non è un'opzione, usa questo trucco:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

Il trucco qui è data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" rimuovere lo sfondo predefinito e crearne uno fittizio impostando il colore di sfondo della finestra stessa con un po 'di alfa.

Aggiornamento 1: Come sottolineato da @Gustyn, facendo clic sullo sfondo non si chiude la finestra di dialogo come previsto. Quindi, per raggiungere questo obiettivo, devi aggiungere un codice di script Java. Ecco alcuni esempi di come puoi raggiungere questo obiettivo. 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
— Krishnendu
fonte
Funziona tranne che facendo clic sullo sfondo non si chiude la finestra di dialogo come previsto.
— Gustyn,
Krishnendu sei il mio eroe. Sono venuto a lavorare pensando al destino e alla tristezza. 3 giorni prima della mia presentazione finale per affrontare questo problema all'improvviso è stato snervante per non dire altro. U mio amico meriti 100000 voti purtroppo te ne posso dare solo uno :) Buona giornata meravigliosamente benedetta.
— DotNetBeginner,
Quando provo questo, non copre l'intero sfondo della pagina - solo l'elemento div in cui è dichiarato il modale.
— Will Sam
Ha funzionato perfettamente. Grazie!
— Gfernandes,
Ha funzionato perfettamente. Grazie!
— Mayank Pandeyz,
16

A ma in ritardo questo, ma ecco una soluzione generica -

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

Visita questo link - Bootstrap 3 - modale che scompare sotto lo sfondo quando si utilizza una barra laterale fissa per i dettagli.

— Rohan
fonte
Questa era una soluzione perfetta per un plugin Wordpress che stavo creando dove non potevo controllare gli elementi principali sui temi di altre persone.
— Mark Rummel,
La migliore soluzione finora!
— digz6666,
10

Un altro modo per accedervi è rimuovere l'indice z dal file .modal-backdrop in bootstrap.css. Questo farà sì che lo sfondo sia allo stesso livello del resto del tuo corpo (continuerà a sbiadire) e il tuo modale sarà in cima.

.modal-backdrop Somiglia a questo

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}
— Samuel Bergeron
fonte
10

Aggiungi solo due righe di CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

Lo sfondo .modal dovrebbe avere un valore di 1050 per impostarlo sulla barra di navigazione.

— Wahyu Primadi
fonte
Bello, ma se il contenitore dei modali ha position: fixedquesto non funzionerà.
— CPHPython,
10

Ciò coprirebbe tutte le modali senza incasinare le animazioni o il comportamento previsto. 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
— Cam Tullos
fonte
1
soluzione globale. tuttavia è meglio trovare il problema.
— Milad Abooali,
Non credo sia un'ottima soluzione, per quanto riguarda le pagine con molte modali? Potrebbe diventare disordinato.
— Glen,
Puoi spiegare come sarebbe diventato disordinato? Tutto ciò che sta facendo è spostare il modale da dove si trova attualmente nel DOM alla fine del tag body. Non sta creando nulla che non sia già lì, semplicemente spostandolo e dandogli automaticamente il miglior indice z.
— Cam Tullos,
La migliore soluzione penso. non c'è bisogno di modificare alcun CSS e modificare l'aspetto modale
— Moslem7026,
8

Ho semplicemente impostato:

#myModal {
    z-index: 1500;
}

e funziona ....

Per la domanda originale: 

.my-module {
    z-index: 1500;
}
— AmintaCode
fonte
Anche il mio problema era l'indice z.
— James Lock,
8

Questo problema può spesso verificarsi quando si usano cose come gradienti nei CSS per cose come sfondi o persino intestazioni di fisarmonica.

Sfortunatamente, la modifica o l'override del core Bootstrap CSS è indesiderabile e può portare a effetti collaterali indesiderati. L'approccio meno invadente è quello di aggiungere data-backdrop="false"ma potresti notare che l'effetto di dissolvenza non funziona più come previsto.

Dopo le recenti versioni di Bootstrap, la versione 3.3.5 sembra risolvere questo problema senza effetti collaterali indesiderati.

Scarica: https://github.com/twbs/bootstrap/releases/download/v3.3.5/bootstrap-3.3.5-dist.zip

Assicurati di includere i file CSS e i file JavaScript da 3.3.5.

— Richard Nalezynski
fonte
6

Ciao ho avuto lo stesso problema, poi mi rendo conto che quando si utilizza bootsrap 3.1 A differenza delle versioni precedenti di bootsrap (2.3.2) la struttura html del modale è stata modificata!

devi avvolgere il corpo e il piè di pagina modale dell'intestazione con il dialogo modale e il contenuto modale 

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>
— talsibony
fonte
+1 assicurati di utilizzare versioni compatibili di bootstrap.css e bootstrap.js e che il tuo markup corrisponda alla versione che stai utilizzando.
— srayner,
Sì, questa è la mia conclusione e l'ho scritto qui solo se qualcuno ha avuto questo problema.
— talsibony,
Gesù Cristo, questa risposta è sepolta in profondità. Stesso caso per Bootstrap 4.
— Randell
6

nessuna delle soluzioni suggerite sopra ha funzionato per me, ma questa tecnica ha risolto il problema:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});
— Javed Iqbal
fonte
Preferisco così perché ho perso la formattazione CSS con gli altri metodi.
— Eugene van der Merwe,
6

Ho avuto questo problema e il modo più semplice per risolverlo era addind z-index maggiore di 1040 sul div finestra di dialogo modale:

<div class="modal-dialog" style="z-index: 1100;">

Credo che bootstrap crei una dissolvenza div in background modale in cui nel mio caso ha lo z-index 1040, quindi se metti la finestra di dialogo modale in cima a questo, non dovrebbe essere più in grigio.

— Chris Rosete
fonte
6

Ho una soluzione più leggera e migliore ..

Potrebbe essere facilmente risolto attraverso alcuni stili CSS aggiuntivi ..

  1. nascondi la classe .modal-backdrop(generata automaticamente da Bootstrap.js)

    .modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

  2. impostare lo sfondo di .modalun'immagine di sfondo nero traslucido.

    .modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

Funzionerà meglio se hai un requisito che richiede che il modale sia all'interno di un elemento e non vicino al </body>tag.

— JM Tee
fonte
Mi hai salvato la giornata ... Questa è una bella alternativa!
— notme,
@xunga, non preoccuparti. per favore, condividi questa soluzione con altre persone :)
— JM Tee
è possibile visualizzare le modifiche qui ... stackoverflow.com/posts/42887253/revisions
— notme
Grazie JM, la tua soluzione è stata l'unica che ha funzionato per me.
— Ahmed J.
5

imposta z-index .modal sul valore più alto

Ad esempio, .sidebarwrapper ha un indice z di 1100, quindi imposta l'indice z di .modal su 1101

.modal {
    z-index: 1101;
}
— A Mohudum Kamil
fonte
5

Nel mio caso risolverlo, aggiungilo nel mio foglio di stile:

.modal-backdrop{
  z-index:0;
}
Espandi frammento

con il debugger di Google, è possibile esaminare l'elemento BACKDROP e modificare gli attributi. Buona fortuna.

— Ckevyn Ovalle
fonte
3

nella tua barra di navigazione è navbar-fixed-topnecessario z-index = 1041 e anche se usi bootstarp-combined.min.cssanche il cambio .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

— Mohsin
fonte
3

Cambia la posizione assoluta in relativa.

.modal-backdrop {
    position: relative;
    /* ... */
}
— Aristeu Roriz
fonte
1
rimuove lo sfondo nero
— HCarrasko
3

Puoi anche rimuovere l'indice z da .modal-scenografia. Il css risultante sarebbe simile a questo.

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }
— Matthew Gallegos
fonte
3

Ho rimosso lo sfondo modale.

.modal-backdrop {
    display:none;
}

Questa non è una soluzione migliore, ma funziona per me.

— CodeBriefly
fonte
3

quello che trovo è che:

in bootstrap 3.3.0 non è giusto, ma quando in bootstrap 3.3.5 è giusto.let vedere il codice. 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

  this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)
— ttong
fonte
3

Aggiungi questo alle tue pagine. Funziona per me.

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>
— Takei
fonte
3

Mi è stato risolto aggiungendo lo stile in basso al tag DIV

style="background-color: rgba(0, 0, 0, 0.5);"

E aggiungi CSS personalizzati

.modal-backdrop {position: relative;}
— RaymondLe
fonte
3

Per me la soluzione più semplice era quella di mettere il mio modale in un wrapper con posizione assoluta e indice z superiore a .modal-sfondo. Dato che lo sfondo modale (almeno nel mio caso) ha z-index 1050:

.my-modal-wrapper {
  position: absolute;
  z-index: 1060;
}
<div class="my-modal-wrapper"></div>
Espandi frammento

— sivi911
fonte
z-index ha funzionato per me. Molte grazie.
— Asif Iqbal,
2

Nel mio caso, avevo un wrapper con il seguente:

.wrapper { margin: 0 auto; position:relative; z-index:1;overflow:hidden;}

Ho rimosso solo z-index: 1 e non ho idea del perché il problema sia stato risolto. anche di certo la rimozione della posizione relativa ha fatto ma ne avevo bisogno.

— hsobhy
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.