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

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

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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.