Modal de bootstrap: o fundo salta para o topo na alternância

111

Estou com um problema com modal. Eu tenho um botão em uma página que alterna o modal. Quando o modal aparece, a página salta para o topo.

Fiz tudo o que pude para encontrar uma solução / etc, mas estou realmente perdido.

EDITAR:

Eu também tentei com: $('#myModal').modal('show');mas tem exatamente o mesmo efeito.

javascript jquery css twitter-bootstrap twitter-bootstrap-3 FooBar
fonte
Hello Benni. Sim, estou desafiadoramente. Também tentei com: $ ('# myModal'). Modal ('show'); mas tem exatamente o mesmo efeito.
FooBar de
1
isso pode ajudá-lo, mesmo problema: stackoverflow.com/questions/12894570/…
Marcos
@Mark, veja minha resposta abaixo ...
Ravimallya
Notei que se clicar em qualquer lugar windowdo modal, o modal dispara. Isso parece estranho e inesperado. Removi o buttonvia devtools e, clicando em qualquer lugar da página, ainda abri a janela modal. Esse era o comportamento desejado? Eu me pergunto se você não tem o seletor certo para o evento de clique modal.
dward

Respostas:

174

Quando o modal é aberto, uma modal-openclasse é definida para a <body>tag. Esta classe define overflow: hidden;o corpo. Adicione esta regra à sua folha de estilo para substituir o estilo bootstrap.css:

body.modal-open {
    overflow: visible;
}

Agora o pergaminho deve ficar no lugar.

pstenstrm
fonte
@pstenstrm, tenho uma dúvida. você disse para substituir o css por .modal-open class. Mas, e se houver divs de fechamento extras e, em minha resposta, eu não substituir nenhuma classe em minha resolução? Funciona bem após a remoção de 2 divs extras. bs modal adicionando .modal-backdrop div que vai ficar confuso onde ele precisava ser fechado por causa de tags de fechamento extras.
Ravimallya
4
Não funciona para mim, eu tenho o modal dentro de um iframe e ele está rolando para cima ... alguma ideia?
Cabuxa.Mapache
5
Isso consertou para mim. Só para adicionar a raiz do meu problema era 'body {height: 100%}'.
PeteG
23
Não está funcionando para mim. Tenho um modal vanilla com o qual estou abrindo .modal('show')e ele ainda rola para o topo da página. Bootstrap v3.2.0
MandM
6
Eu tive que adicionar position: inherita esta classe, mas funcionou como um encanto depois disso.
adrian3martin
28

Se você estiver chamando modal com tag. Tente remover '#' do atributo href. E chamar modal com atributos de dados.

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>
Gokhan
fonte
Eu abro exatamente como você postou lá. Confira o link
FooBar
5
se você não usar o "<button>" mas <a>, como no meu caso, você perderá o ícone "botão do dedo" ao mover o cursor do mouse sobre o objeto. Para superar isso, fiz isso: ... href = "# mai_modal_id" data-toggle = "modal" ... e não usei data-target
pagurix
3
@pagurix - Seu comentário funcionou melhor para o meu cenário.
AlfredBr
Eu acho que @pagurix deve escrever seu comentário como uma resposta separada. A única coisa que ajudou. Afirmativo!
Vibhor Dube de
14

se você estiver usando uma tag de âncora <a href"#" ..> ... </a>e href="#"estiver criando um problema, remova-a. Você pode ler mais aqui

Nimesh Jain
fonte
12 
$('the thing you click on').click(function ($e) {
            $e.preventDefault();
});

Isso ajudará você a impedir que a barra de rolagem fique no topo. Funcionou para mim

Georgi Mirchev
fonte
5

Possivelmente trabalhando com modais aninhados em algum lugar do código:

body.modal-open {
    overflow: visible;
    position: absolute;
    width: 100%;
    height:100%;
}

Para mim foi uma combinação de posição, altura e transbordamento.

Dennis Heiden
fonte
4

Não vejo um erro específico, mas recomendo que você verifique sua sintaxe html .

Um pequeno teste com sua fonte me dá erros como

Linha 127, coluna 34: elemento não fechado div.

              <div class="inner onlySides">

Isso pode ser um problema.

BillyJoe
fonte
Obrigado - vou analisar isso - embora eu ache difícil de acreditar que isso possa desencadear o problema que estou enfrentando. Parece que você está usando um plug-in para rastrear isso - se estiver; qual?
FooBar
Eu não uso o plugin, exceto o firebug. É sempre bom verificar a validade da sua página em validator.w3.org . Seria um problema porque se você tiver div não fechado, terá um comportamento estranho :)
billyJoe
4

A maneira mais fácil de resolver o fundo de salto é definir dois parâmetros:

body.modal-open {
  overflow: visible;
  padding-right: 0 !important;
}
Nils
fonte
3

Tentei replicar esse problema no meu host local e, por mais estranho que possa parecer, há um conflito com o arquivo JS do Bootstrap que você está usando.

Experimente comentar seu código de:

<script src="/min/?f=bootstrap.min.js,modernizr.js,bootstrap-datetimepicker.js,nprogress.js,feedback.js,select2.min.js,jquery.unveil.js,equalheights.jquery.js,hogan-v2.0.0.min.edu-custom.js,jquery.visible.min.js,handlebars-v1.2.0.js,typeahead.bundle.min.js,jquery.gridster.js,cookie.jquery.js,jquery.autosize.min.js,application.js&ver=1392814384"></script>

Em vez disso, use o Bootstrap 2.3.2:

<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>

Isso fez funcionar para mim.

Tentei com o Bootstrap versão 3, mas não funcionou. Ainda não consigo identificar a parte do problema, mas em algum lugar ao longo do Firebug me apresentou um e.preventDefault() is not a functionerro - acho que essa deve ser a causa raiz, mas ainda devo compará-la com os outros arquivos JS.

AyB
fonte
3

Tentei definir .modal top no centro da tela. 

.modal {
    position: absolute;
    top: 50%;
}

Apenas meus 2 centavos de pensamento.

Holger Thiebosch
fonte
Perto o suficiente. Não vou votar negativamente porque meu problema pode estar em outro lugar, mas isso fez com que a metade inferior da tela ficasse esmaecida, mas o modal foi posicionado em direção ao centro.
crafter
3

No bootstrap 3.1.1, resolvi com esta solução:

body.modal-open {
    position: absolute !important;
}
Filo
fonte
2
Você salvou meu dia @Filo. Muito obrigado
vinothini
2

você tem 2 divtags de fechamento extras antes <div id="footer">ou depois do <div id="mainFrame" class="group">div. Estou usando o Visual Studio 2012 Express para inspecionar isso.

Remova esses 2 divs extras e nos diga como funciona. Eu removi divs extras e removi todos os scripts personalizados. retido apenas o núcleo jquery e bootstrap no rodapé. aqui está a captura de tela da saída final. aqui está o playground do jsbin para você, que está funcionando bem.

Eu sugiro que você use headjs para carregar todos os scripts e arquivos css. também não é uma boa prática carregar qualquer script duas vezes.

insira a descrição da imagem aqui

Ravimallya
fonte
4
as respostas com votos negativos precisam de comentários adequados com motivos.
Ravimallya
2

Tente usar isso para abrir o modal e ver o que acontece:

<a href="#generalModal" class="btn btn-primary btn-lg" data-toggle="modal">
  Launch demo modal 
</a>
scooterlord
fonte
2 
body.modal-open {
overflow: visible !important;
}

Eu precisava do atributo importante para corrigir isso

Dizzle
fonte
Isso funcionou para mim, e tive o problema de @MandM (nos comentários) com a resposta de pstenstrm: "Não está funcionando para mim. Tenho um modal vanilla que estou abrindo com .modal ('show') e ainda rola para o topo da página. Bootstrap v3.2.0 ". O único efeito estranho que tem é que agora o plano de fundo irá rolar se você continuar a rolar um modal que é mais alto do que a janela, mas este é um problema menor para mim. Obrigado.
dgig
1

Tive o mesmo problema ao usar o Bootstrap 2.3.2

Foi um problema ao clicar em um link:

O truque era: retornar falso;

<a href="#" class="btn" onclick="openPositionPopup(${positionReport[0]}); return false;">
     <i class="icon-map-marker"></i>
</a>

e o js:

function openModal() {
    $('#myModal').modal('show');
}
mpccolorado
fonte
1

Passei horas tentando fazer de tudo aqui e em outros lugares. Para o uso do material angularjs, descobri que tive que desativar a animação no objeto de configuração uibModal.open arg.

Por exemplo:

  $uibModal.open(
    {
      animation: false,
      component: 'myDialogComponent',
      size: 'lg',
      resolve: {
        details: function() {
          return detailsCollection;
        }
      }
    }
  );

Espero que isso ajude mais alguém.

Nathan Beach
fonte
1

Se você estiver enfrentando esse problema em um programa Angular, adicione o código abaixo na primeira linha do arquivo .scss.

::ng-deep {   
     body.modal-open {
          overflow: visible !important;
          position: absolute !important;   
     } 
}
panda sibashankar
fonte
0

Eu tive o mesmo problema e acho que descobri. Você só precisa colocar o HTML modal como um filho direto da tag body ! Você pode colocar o código HTML para o botão que aciona o modal onde quer que você precise. Acredito que isso evita problemas de herança e posição CSS que desencadeiam esse problema.

Exemplo:

<body>
    <!-- All your other HTML code -->
    <div>
        <!-- Button trigger modal -->
        <button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
            Launch demo modal
        </button>
    </div>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</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>
    </div>
</body>
nunoarruda
fonte
0

Finalmente descobri este. NÃO envolva o botão direcionado ao modal em uma tag âncora.

Ruim

<a href"#">
    <button type="button" class="btn"
data-toggle="modal" data-target="#myModal">See Detail</button>
</a>

Boa

<button type="button" class="btn"
    data-toggle="modal" data-target="#myModal">See Detail</button>
ALFmachine
fonte
0

Este fez isso por mim

body.modal-open {
    overflow: inherit;
    padding-right: 0 !important;
}
kit de guerra
fonte
Eu estava tendo um problema semelhante com a barra de navegação e o salto de contêiner quando o modal foi aberto. Isso é o que eu estava procurando.
Awhitey98
Que bom que ajudou!
Warkitty
0

Depois de ler dezenas de respostas por várias horas, copiei o código original do arquivo de bootstrap novamente e depurei passo a passo para ver o que fazia com que eu sempre pule para o topo. Porque a versão atual mais recente do Bootstrap 3 está mostrando o modal na posição em que você está agora. Eu descobri isso -webkit-transform: translate3d(0,0,0);e height: 100%no meu css body-tag causou esse comportamento. Talvez isso ajude alguém.

AlexioVay
fonte
0

Para mim funciona quando mudei a versão 3.1.1 para 3.3.7

Se você não precisa usar a versão 3.3.1, tente substituí-la.

Após a alteração, é bom verificar se o restante da função funciona corretamente.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Pyot
fonte
0

body.modal-open { position: inherit; }

Isso funcionou como um encanto para mim.

Nimish Goel
fonte
0

Tentei todos os exemplos acima - esta é a única coisa que funcionou para mim:

.modal-open {

            padding-right: 0 !important;

        }

Remover o enchimento do lado direito do modelo - evita o salto.

Stnfordly
fonte
0

altura: 100% é resolver o problema, mas você deve adicionar "div" correto

Anar Ali
fonte
0

Eu tenho o mesmo problema e nenhuma das respostas me ajudou. Encontrei uma solução alternativa que parece estúpida, mas funciona pelo menos no meu caso.

Descobri que a página está rolando para o topo apenas uma vez e, depois disso, os próximos modais abertos funcionam conforme o esperado. Então eu descobri que esconder qualquer elemento no DOM inicia o mesmo pergaminho estranho. Então, acabei de criar um div fictício após o carregamento da página, em vez de ocultá-lo e removê-lo, e isso resolveu o problema.

var $dummy= $("<div>");
$("body").append($dummy);
$dummy.hide().remove();
Borzilo Andrey
fonte
0

Eu estava enfrentando o mesmo problema. O problema era que eu estava adicionando a classe .modal-open aos elementos html e body. Basta adicionar essa classe ao corpo e tudo funcionará conforme o esperado.

geral666
fonte
-1

Experimente isso funciona perfeitamente

/* fix body.modal-open overflow:hidden */
body.modal-open {
    height: auto;
}
mínimo
fonte
-3

Se a resposta de pstenstrm não funcionar para você, tente combiná-la com este botão de substituição HTML:

<a class="btn btn-primary btn-lg" data-toggle="modal" data-target="#generalModal" id="launchbutton" href="#launchbutton"> Launch demo modal </a>

Isso deve manter o botão na tela.

Ben
fonte