Problema modal de bootstrap - a rolagem é desativada

93

Eu tenho um modal e dentro desse modal, há uma lista suspensa que exibe um grande conteúdo oculto, que está funcionando.

Agora, quando você abre o próximo modal, empilhado em cima do primeiro modal e o dispensa, a rolagem no modal abaixo fica desabilitada.

Criei um exemplo completo, incluindo as etapas para reproduzir o problema que estou enfrentando. Você pode ver isso aqui .

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <title></title>
    <style>

    </style>
</head>
<body>


    <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" >

    <div class="modal fade" id="modal_1">
        <div class="modal-dialog modal-sm">
            <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">First Modal</h4>
                </div>
                <div class="modal-body">



                    <form class="form">

                        <div class="form-group">
                            <label>1) Open This First: </label>
                            <input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" >
                        </div>

                        <div class="form-group">
                            <label>2) Change this once you have opened the modal above.</label>
                            <select id="change" class="form-control">
                                <option value="small">Show Small Content</option>
                                <option value="large">Show Large Content</option>
                            </select>
                        </div> 

                        <div id="large" class='content-div'>
                            <label>Large Textarea Content.. Try and scroll to the bottom..</label>
                            <textarea rows="30" class="form-control"></textarea>

                        </div>

                        <div id="small" class='content-div'>
                            <label> Example Text Box</label> 
                            <input type="text" class="form-control">
                        </div>  


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modal_2">
        <div class="modal-dialog modal-sm">
            <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">Second Modal</h4>
                </div>
                <div class="modal-body">

                    <hp>This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... </h5>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script>

    $(document).ready(function() {


        $(".content-div").hide();
        $("#change").change(function() {
            $(".content-div").hide();
            $("#" + $(this).val()).show();
        });


    });

</script>
</html>

Aqui está um Bootply para mostrar o comportamento em ação:

Bootply

jquery html twitter-bootstrap Carl Smith
fonte
1
"Certifique-se de não abrir um modal enquanto outro ainda estiver visível. Mostrar mais de um modal por vez requer código personalizado" e também viola a finalidade para a qual os modais foram destinados.
Blazemonger
Consulte também stackoverflow.com/a/24914782/58241 que contém uma correção não apenas para o problema da barra de rolagem, mas também para os problemas de estilo
benrwb

Respostas:

121

Esta também é uma solução

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto funciona bem :) Isso na verdade corrigirá qualquer modal que seja maior do que o tamanho da tela.

Jake Taylor
fonte
5
Esta solução resolveu meu problema, ao fechar e abrir modais da jQuery$('.modal').css('overflow-y', 'auto');
Gla
Salvador da vida) Obrigado
Victor Gorban
67

Isso ocorre porque quando você fecha um modal, ele remove o modal-opendo<body> tag. O bootstrap não oferece suporte a vários modais na mesma página (pelo menos até o BS3).

Uma forma de fazer funcionar, é utilizar o hidden.bs.modalevento disparado pelo BS ao fechar um modal, a seguir verificar se existe algum outro modal aberto para forçar a modal-openclasse no corpo.

// Hack to enable multiple modals by making sure the .modal-open class
// is set to the <body> when there is at least one modal open left
$('body').on('hidden.bs.modal', function () {
    if($('.modal.in').length > 0)
    {
        $('body').addClass('modal-open');
    }
});
Molkobain
fonte
11
(BS4) Primeira resposta que pude começar a trabalhar, só tive que usar ($ ('. Modal.show'). Length> 0) para Bootstrap 4.
Shoejep
Obrigado - meu problema não era exatamente o mesmo, mas seu comentário me apontou para a classe modal-open no corpo que é a causa da ação de rolagem de página perdida.
Jon
38

Eu encontrei uma solução para você. Não sei por que isso não funciona, mas apenas um código de linha em seu CSS resolverá o problema. Depois de fechar o segundo modal, os primeiros estão ficando de overflow-y:hiddenalguma forma. Mesmo se estiver definido para, autona verdade.

Você precisa reescrever isso e definir sua própria declaração em CSS:

#modal_1 {
    overflow-y:scroll;
}

Aqui você tem um DEMO funcionando

Editar : link errado, desculpe.

Kamil
fonte
não está funcionando, torna o contêiner rolável, mas faz com que a roda do mouse também
fique presa
20 
$(document).ready(function () {

 $('.modal').on("hidden.bs.modal", function (e) { //fire on closing modal box
        if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close
            $('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page
        }
    });
});
//this code segment will activate parent modal dialog 
//after child modal box close then scroll problem will automatically fixed
KATJ Srinath
fonte
3
IMO esta é a melhor resposta. Adicionar css extra para overflow-y: auto também funciona, mas como mencionado abaixo, resulta em barras de rolagem duplas.
Jacob Rutherford
2
Funciona com Bootstrap 4.1 também. Apreciado
Willi
2
Acordado. testei 2-3 respostas e esta funciona para Twitter Bootstrap 4.2.1.
Tpojka
11

Siga https://github.com/nakupanda/bootstrap3-dialog/issues/70 add

.modal { overflow: auto !important; }

para o seu css

truongpmcs
fonte
2
esta solução criaria duas barras de rolagem
Weijing Jay Lin
há tantas soluções aqui que eles disseram que está funcionando, escolhi esta por causa da simplicidade. funcionou perfeitamente para mim. votado.
kapitan
9

Para o bootstrap 4, eu tive que adicionar! Importante

.modal {
    overflow-y: auto !important;
}

Se isso não for feito, não funciona e não é aplicado.

captura de tela

Manu Burrero Sánchez
fonte
Para mim, é uma solução meio funcional, porque eu preciso clicar no modal para recuperar a capacidade de rolagem. A solução @ashish dwivedi funcionou perfeitamente para mim.
Matthieu Charbonnier
6

Em primeiro lugar, vários modais abertos não são suportados pelo Bootstrap. Veja aqui: Documentos do Bootstrap Modal

Vários modais abertos não são suportados. Certifique-se de não abrir um modal enquanto outro ainda estiver visível. Mostrar mais de um modal por vez requer um código personalizado.

Mas, se for necessário, você pode adicionar este bit de CSS em sua folha de estilo personalizada, desde que esteja incluído após a folha de estilo principal do Bootstrap:

.modal {
    overflow-y:auto;
}
Faixa rápida
fonte
5

O bootstrap não suportava vários modais ao mesmo tempo. É um bug de bootstrap. Basta adicionar o script abaixo para BS4.

$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
    $('body').addClass('modal-open');
}
});
Ashish Dwivedi
fonte
Funciona bem. Mas certifique-se de colocar este código após seus modais, ou em um $(document).readymétodo.
Matthieu Charbonnier
4 
$('.modal').css('overflow-y', 'auto');
Usman Asif
fonte
3

Resolvi o problema removendo data-dismiss="modal" e adicionando

setTimeout(function(){ $('#myModal2').modal('show') }, 500);
$('#myModal1').modal('hide');

Espero que ajude

Ensolarado A
fonte
Obrigado @Sunny, não sei por que outras soluções não funcionam para mim, mas esta definitivamente funcionou
dev-masih
@MasihAkbari pode ser problema de versão :) Este também é para me ajudar. Estou usando o BS4. Pode haver um pequeno problema de desempenho devido ao atraso, mas esta é uma solução rápida e fácil.
Weijing Jay Lin
2

Presumo que seja por causa de um bug no bootstrap do Twitter. Parece remover a modal-openclasse do corpo mesmo que dois modais estivessem abertos. Você pode colocar em um teste para a removeClassfunção do jQuery e ignorá-lo se ainda houver um modal aberto (o crédito pela função base vai para esta resposta: https://stackoverflow.com/a/1950199/854246 ).

(function(){
    var originalRemoveClassMethod = jQuery.fn.removeClass;

    jQuery.fn.removeClass = function(){
        if (arguments[0] === 'modal-open' && jQuery('.modal.in').length > 1) {
            return this;
        }
        var result = originalRemoveClassMethod.apply( this, arguments );
        return result;
    }
})();
Joseph Marikle
fonte
Conforme mencionado por @Blazemonger, Bootstrap explicitamente não oferece suporte a modais de empilhamento
cvrebert
1

Este código resolveu o meu, quando o segundo popup fechou, meu primeiro popup não pode mais rolar.

$('body').on('hidden.bs.modal', '#SecondModal', function (e) {
  if ($('#FirstModal').is(':visible')) { // check if first modal open 
    $('body').addClass('modal-open'); // re-add class 'modal-open' to the body because it was removed when we close the second modal
    $('#FirstModal').focus(); // Focus first modal to activate scrollbar
  }
});
Aurelie PATRICIA
fonte
1

Tipo de hack, mas eu gosto de apenas fechar e reabrir no fechamento modal para acabar com qualquer comportamento estranho / indesejado. Se você tiver desativado o fade, não poderá notá-lo fechando e reabrindo:

var $ModalThatWasOnTop= $('#ModalThatWasOnTop')

$ModalThatWasOnTop.on('hidden.bs.modal', function(e) {
     console.log('closing  modal that was on top of the other modal')
     $('#ModalThatWasCovered').modal('hide');
     $('#ModalThatWasCovered').modal('show');

});
Jared
fonte
0

Adicione via JQuery a classe 'modal-open' ao corpo. Presumo que o pergaminho funcione em tudo, exceto no modal.

Como um comentário às respostas anteriores: adicionar a propriedade overflow ao modal (via CSS) ajuda, mas você terá duas barras de rolagem na página.


fonte
0

Esta também é uma solução

.modal.fade .modal-dialog{
   -webkit-transform: inherit;
}
Sameera Prasad Jayasinghe
fonte
0

Na verdade, descobri uma solução para isso. Na verdade, você precisa habilitar a rolagem para o corpo da página se estiver usando $('#myModal').hide();para ocultar um modelo. Basta escrever a seguinte linha após $('#myModal').hide();:

$('body').attr("style", "overflow:auto")

Isso reativará a rolagem.

Jordânia
fonte
0

Se você estiver usando bootstrap3 ou 4, certifique-se de ter uma classe modal-open no corpo html. Não tenho certeza se isso é obrigatório, mas talvez certifique-se de que seu Z-index do fundo modal esteja limpo.

    $('.your-second-modal').on('hidden.bs.modal', function (e) {
        $('.your-second-modal').css('z-index', "");
        $('.modal-backdrop').css('z-index', 1040);
        $('body').addClass("modal-open");
    });
lechat
fonte
0

Adicione este código js abaixo

    $(document).on("click",".modal",function () {
       if(!$("body").hasClass('modal-open'))
           $("body").addClass('modal-open');
    });
Lal Chand
fonte
0

Simples se você estiver usando bootstrap modal do que você precisa remover tabindex = "- 1" no lugar deste

**Colar**
pramod vishwakarma
fonte