Modal de inicialização aparecendo em segundo plano

576

Eu usei o código do meu modal diretamente no exemplo do Bootstrap e incluí apenas o bootstrap.js (e não o bootstrap-modal.js). No entanto, meu modal está aparecendo sob o desbotamento cinza (pano de fundo) e não é editável.

Aqui está o que parece:

oculto modal por trás do pano de fundo

Veja este violino para uma maneira de reproduzir esse problema. A estrutura básica desse código é assim:

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

Alguma idéia de por que isso é ou o que posso fazer para corrigir isso?

javascript css twitter-bootstrap modal-dialog natlines
fonte
Caso alguém procure algum tempo por tags abertas, etc. tentando descobrir por que isso está acontecendo, para mim foi a extensão do Chrome do Feedly que quebrou meus modais. Desativar a extensão retornou o comportamento ao normal.
threeve
Em maio, o problema ocorreu no iOS e foi causado por overflow-x: hiddenaplicado ao contêiner do modal.
Idmean 17/07/2015
1
Criou 3 exemplos em 3 versões. 3.3.1 funciona bem e os outros não. Versão 3.3.1 jsfiddle Versão 3.3.5 jsfiddle Versão 3.3.6 jsfoddle
Dimitry
1
Criar um relatório de erro com a equipe do Bootstrap parece que este não é realmente um bug, mesmo que tenha funcionado bem no 3.3.1. Você pode ler mais sobre isso no link que eu publiquei.
precisa
Um post de relevância para qualquer pessoa que esteja

Respostas:

629

Se o contêiner modal tiver uma posição fixa ou relativa ou estiver dentro de um elemento com posição fixa ou relativa, esse comportamento ocorrerá.

Verifique se o contêiner modal e todos os seus elementos pai estão posicionados da maneira padrão para corrigir o problema.

Aqui estão algumas maneiras de fazer isso:

  1. A maneira mais fácil é simplesmente mover a div modal para que fique fora de qualquer elemento com posicionamento especial. Um bom lugar pode estar logo antes da etiqueta do corpo de fechamento </body>.
  2. Como alternativa, você pode remover position:propriedades CSS do modal e de seus ancestrais até que o problema desapareça. No entanto, isso pode mudar a aparência e o funcionamento da página.
Muhd
fonte
24
Boa pegada. FYI, não apenas "fixo", postion do pai "relativa" faz com que esse problema também
Giang Nguyen
3
@ Muhd, como você garante que todos os seus elementos pai estejam posicionados da maneira padrão?
Indago
4
Prefira usar a opção um: "basta mover a div modal para que fique fora de qualquer elemento com posicionamento especial". Thx
mpgn
9
Eu não entendo essa resposta. Os exemplos do Bootstrap mostram uma div modal com um número de classes ao longo da linha de "modal", "modal-fade", etc. Então, como a movimentação do contêiner modal vai mudar alguma coisa, quando .modal define a posição: fixo?
Carlos Carlos
4
Eu ainda tenho esse problema. Eu o adicionei logo antes </body>e bodynão tem nenhum positionatributo de estilo. Alguma outra ideia?
Tuan Anh Tran
383

O problema tem a ver com o posicionamento dos contêineres pai. Você pode "mover" facilmente seu modal desses contêineres antes de exibi-lo. Aqui está como fazer isso se você estivesse showusando seu modal usando js:

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

Ou, se você iniciar o modal usando os botões, solte o .modal('show');e faça:

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

Isso manterá toda a funcionalidade normal, permitindo que você mostre o modal usando um botão.

Adam Albright
fonte
12
Use esse manipulador de eventos genérico para tornar o trabalho @leandrotk solução para todos os modais você pode ter em uma página $('.modal-dialog').parent().on('show.bs.modal', function(e){ $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
Patrick M.
2
@PatrickM. Surpreendente! que funcionou como um encanto em um projeto antigo que estou assumindo e eles tinham modais em todo o lugar!
Denislexic
5
Isso funciona muito bem quando você realmente não pode corrigir o posicionamento do CSS. Obrigado :)
alexcasalboni
Existe uma razão pela qual perco toda a formatação CSS ao fazer isso? E uma solução fácil? :-)
Eugene van der Merwe,
1
Na resposta leandrotk, altere #myModal para .modal para ficar assim: $ ('. Modal'). AppendTo ("body"). Isso funcionará com todos os modais, pois eles têm um modal de classe padrão.
Ngatia Frankline
170

Eu tentei todas as opções fornecidas acima, mas não consegui usá-las.

O que funcionou: definindo o índice z do .modal-backdrop como -1.

.modal-backdrop {
  z-index: -1;
}
Jan van der Burgt
fonte
10
Isso funcionou perfeitamente e é de longe a solução mais fácil. Eu useiz-index: 0;
andrewcockerham
Também pode confirmar que apenas essas opções funcionam! Obrigado!
Ferry Kranenburg
Obrigado! Isso é um bug no BS3?
mauriblint
1
Isso não funciona se você estiver usando um tema que tenha muitos índices z variáveis. Por exemplo, definir o pano de fundo para -1fazer com que apareça atrás de outros elementos na página, como painéis. Mas configurá-lo para 3torná-lo acima de tudo, exceto o pop-up modal.
Justin Skiles
1
Descobri que esse também era o método mais rápido depois de esgotar as sugestões nas respostas classificadas acima. No meu caso, definir o div com a classe modal-dialog para um índice z de 1060 apareceu na frente da sobreposição. Se você usar a barra de navegação que você vai querer mover o modal acima da sobreposição e não o contrário, caso contrário a sua barra de navegação pode aparecer no topo dos insues sobreposição ... caos ...
Mike Devenney
152

Além disso, verifique se a versão do BootStrap css e js são as mesmas. Versões diferentes também podem fazer com que o modal apareça em segundo plano:

Por exemplo:

Ruim:

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

Boa:

<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
Também foi para mim. Obrigado!
PedroTanaka
Só tive o mesmo problema, a mesma solução de folha de estilo de versão parece ter ajudado a todos! Obrigado
HGB
Obrigado, este foi o meu problema exato
Malcor
Malcor sem problemas, passei muito tempo enquanto descobri esse bug. Como vemos que foi em '14, agora é '16, ainda existem erros. Na verdade, este não é um bug, mas na inicialização autores devem adicionar isso em sua documentação ou algo ..
Sid
O mesmo acordo aqui, mudamos para gerar nosso SASS e esquecemos completamente o próprio arquivo js .. Essa precisa ser a resposta principal. Como nosso modal é sempre incluído por padrão antes do tag de fechamento do corpo ...
Irritado 84
116

Eu também encontrei esse problema e nenhuma das soluções funcionou para mim até que eu descobri que realmente não preciso de um pano de fundo. Você pode remover facilmente o pano de fundo com o código a seguir.

<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 : o data-backdropatributo precisa ser definido como false( outras opções : staticou true).

PieterVK
fonte
2
De longe, a solução mais fácil e funciona como um encanto!
learning_to_swim
Brilhante! Eu também precisava exigir o bootstrap - não sei por que todas as minhas outras funcionalidades do Bootstrap funcionam bem, mas precisava fazer o trabalho modal.
Steve Klein
Perfeito !!! lutou por um dia .. e você salvou meu outro dia. Mais uma vez obrigado .. +1 e felicidades
Bhaskara 28/04
1
Depois de ler cuidadosamente todas as soluções, achei a mais sensata na versão de hoje do bootstrap e do jQuery. Obrigado.
Criptografia
3
Obrigado! Esta pergunta tem mais de 140k de visualizações e não entendo por que o bootstrap não pode corrigir isso. oh bem, saúde.
Chad
58

Consegui fazê-lo, atribuindo um alto valor de índice-z à janela modal APÓS abri-la. Por exemplo:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");
Andrew Dyster
fonte
Está funcionando (o homem diz que está), por que você baixa o voto? Como eu estou olhando, parece que vai.
Rolice
Sim, alguém pode explicar por que essa é uma resposta ruim? É só que é meio hacky?
brandones
6
Eu não entendo os votos negativos. Sim, é hacky, mas as outras soluções não funcionaram para mim, então pensei em contribuir com as pessoas que não se importam em usar soluções "hacky" para fazer com que a maldita coisa funcione.
Andrew Dyster
Este foi um insight relevante para meu problema específico, colocando um modal sobre um elemento de tela cheia. +1
Jack Stone
3
É uma resposta ruim porque é um hack e não faz nenhuma tentativa de indicar isso. Outras respostas dizem: "se nada mais funcionar, você poderia ...". A realidade é que o modal é amplamente utilizado na Web e deve funcionar se implementado corretamente. As respostas Hacky não ajudam as pessoas a descobrir como fazer as coisas da maneira correta.
Lukos
35

A solução fornecida pela @Muhd é a melhor maneira de fazê-lo. Mas se você estiver preso em uma situação em que alterar a estrutura da página não é uma opção, use este truque:

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

O truque aqui é data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);" remover o pano de fundo padrão e criar um modelo fictício, definindo a cor de fundo da caixa de diálogo com algum alfa.

Atualização 1: Como apontado por @Gustyn, clicar no plano de fundo não fecha a caixa de diálogo conforme o esperado. Então, para conseguir isso, você precisa adicionar algum código de script java. Aqui está um exemplo de como você pode conseguir isso. 

$('.modal').click(function(event){
    $(event.target).modal('hide');
});
Krishnendu
fonte
Isso funciona, exceto que clicar no plano de fundo não fecha a caixa de diálogo conforme o esperado.
Gustyn
Krishnendu você é meu herói. Eu vim trabalhar com desgraça e tristeza em mente. Três dias antes da minha apresentação final para enfrentar esse problema, de repente, era estressante, para dizer o mínimo. U meu amigo merece 100000 votos positivos, infelizmente, só posso lhe dar um :) tenha um dia maravilhosamente abençoado.
DotNetBeginner
Quando eu tento isso, ele não cobre o fundo completo da página - apenas o elemento div que o modal é declarada no.
Will Sam
Funcionou perfeitamente. Obrigado!
Gfernandes
Funcionou perfeitamente. Obrigado!
Mayank Pandeyz 02/05
16

Um pouco tarde, mas aqui está uma solução genérica -

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

Visite este link - Bootstrap 3 - modal desaparecendo abaixo do pano de fundo ao usar uma barra lateral fixa para obter detalhes.

Rohan
fonte
Esta foi uma solução perfeita para um plug-in do Wordpress que eu estava criando, onde não conseguia controlar os elementos-pai nos temas de outras pessoas.
Mark Rummel
Melhor solução até agora!
digz6666
10

Uma outra maneira de abordar isso é remover o z-index do .modal-backdroparquivo bootstrap.css. Isso fará com que o pano de fundo fique no mesmo nível do resto do seu corpo (ainda desaparecerá) e seu modal fique no topo.

.modal-backdrop se parece com isso

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

Basta adicionar duas linhas de CSS:

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

O .modal-backdrop deve ter um valor de 1050 para configurá-lo na barra de navegação.

Wahyu Primadi
fonte
Bom, mas se o contêiner dos modais tiver position: fixedisso não funcionará.
CPHPython 24/05
10

Isso cobriria todos os modais sem atrapalhar nenhuma das animações ou comportamento esperado. 

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});
Cam Tullos
fonte
1
solução global. no entanto, é melhor encontrar o problema.
Milad Abooali
Não acho que seja uma ótima solução, e as páginas com muitos modais? Pode ficar bagunçado.
Glen
Você pode explicar como ficaria bagunçado? Tudo o que está fazendo é mover o modal de onde ele está atualmente no DOM para o final da tag do corpo. Não está criando nada que ainda não esteja lá, apenas movendo-o e automaticamente fornecendo o índice z superior.
Cam Tullos
Melhor solução, eu acho. não há necessidade de editar qualquer css e mudança aparência modal
Moslem7026
8

Acabei de definir:

#myModal {
    z-index: 1500;
}

e funciona ....

Para a pergunta original: 

.my-module {
    z-index: 1500;
}
AmintaCode
fonte
Meu problema também foi o z-index.
James Bloqueio
8

Use isso no seu modal: 

data-backdrop="false"
Jonathan
fonte
8

Esse problema geralmente pode ser observado ao usar coisas como gradientes no CSS para coisas como planos de fundo ou até mesmo cabeçalhos de acordeão.

Infelizmente, modificar ou substituir o CSS principal do Bootstrap é indesejável e pode levar a efeitos colaterais indesejados. A abordagem menos invasiva é adicionardata-backdrop="false" mas você pode perceber que o efeito de desbotamento não funciona mais como o esperado.

Depois de seguir os lançamentos recentes do Bootstrap, a versão 3.3.5 parece resolver esse problema sem efeitos colaterais indesejados.

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

Certifique-se de incluir os arquivos CSS e JavaScript da 3.3.5.

Richard Nalezynski
fonte
6

Oi Eu tive o mesmo problema, então percebo que quando você usa o bootsrap 3.1 Ao contrário das versões mais antigas do bootsrap (2.3.2), a estrutura html do modal foi alterada!

você deve agrupar o corpo e o rodapé do cabeçalho modal com diálogo modal e conteúdo modal 

<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 verifique se você está usando versões compatíveis do bootstrap.css e bootstrap.js e se sua marcação corresponde à versão que você está usando.
srayner
Sim, esta foi a minha conclusão e eu a escrevi aqui apenas se alguém tivesse esse problema.
talsibony
Jesus Cristo, esta resposta está enterrada profundamente. O mesmo caso para o Bootstrap 4.
Randell
6

nenhuma das soluções sugeridas acima funcionou para mim, mas essa técnica resolveu o 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
Prefiro assim porque perdi a formatação CSS com os outros métodos.
Eugene van der Merwe 23/02
6

Eu tive esse problema e a maneira mais fácil de corrigi-lo era o índice z addind maior que 1040 na div de diálogo modal:

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

Acredito que o bootstrap crie um desbotamento de cenário modal div no qual, no meu caso, tenha o z-index 1040, por isso, se você colocar a caixa de diálogo modal em cima disso, ele não ficará mais cinza.

Chris Rosete
fonte
6

Eu tenho uma solução mais leve e melhor ..

Pode ser facilmente resolvido através de alguns estilos CSS adicionais.

  1. ocultar a classe .modal-backdrop(gerada automaticamente a partir do Bootstrap.js)

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

  2. defina o plano de fundo .modalpara uma imagem de fundo preto translúcido.

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

Isso funcionará melhor se você tiver um requisito que precise que o modal esteja dentro de um elemento e não próximo à </body>tag.

JM Tee
fonte
Você salvou o meu dia ... Esta é uma boa alternativa!
Notme
@xunga, não se preocupe. por favor, compartilhe esta solução para outras pessoas :)
JM Tee
você pode visualizar as edições aqui ... stackoverflow.com/posts/42887253/revisions
notme
Obrigado JM, sua solução foi a única que funcionou para mim.
Ahmed J.
5

defina o .modal do z-index para um valor mais alto

Por exemplo, .sidebarwrapper possui um índice z de 1100, portanto, defina o índice z de .modal como 1101

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

No meu caso, resolva-o, adicione isso na minha folha de estilo:

.modal-backdrop{
  z-index:0;
}
Expandir snippet

com o depurador do google, pode examinar o elemento BACKDROP E modificar atributos. Boa sorte.

Ckevyn Ovalle
fonte
3

na sua barra de navegação navbar-fixed-topprecisa z-index = 1041 e também se você usar bootstarp-combined.min.cssa alteração também .navbar-fixed-top, .navbar-fixed-bottom z-index to 1041

Mohsin
fonte
3

Mude a posição absoluta para relativa.

.modal-backdrop {
    position: relative;
    /* ... */
}
Aristeu Roriz
fonte
1
ele remove o fundo preto
HCarrasko
3

Você também pode remover o z-index do .modal-backdrop. CSS resultante seria assim.

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

Eu removi o pano de fundo modal.

.modal-backdrop {
    display:none;
}

Esta não é a melhor solução, mas funciona para mim.

CodeBriefly
fonte
3

o que eu acho é que:

no bootstrap 3.3.0 não está certo, mas quando no bootstrap 3.3.5 está certo. vamos ver o código. 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

Adicione este às suas páginas. Isso funciona para mim.

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

Foi corrigido isso adicionando o estilo abaixo à tag DIV

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

E adicione CSS personalizado

.modal-backdrop {position: relative;}
RaymondLe
fonte
3 
$('.modal').insertAfter($('body'));
user109764
fonte
3

Para mim, a solução mais fácil foi colocar meu modal em um invólucro com posição absoluta e índice z maior que o .modal-backdrop. Como o modal-backdrop (pelo menos no meu caso) tem o z-index 1050:

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

sivi911
fonte
O z-index funcionou para mim. Muito obrigado.
Asif Iqbal
2

No meu caso, eu tinha um wrapper com o seguinte:

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

Somente removeu o z-index: 1 e não tenho idéia do porquê do problema. também com certeza remover a posição relativa, mas eu precisava.

hsobhy
fonte