Bootstrap Kalıcı Sorunu - Kaydırma Devre Dışı Bırakılıyor

Question 1

Bir modelim var ve bu modelin içinde büyük gizli içeriği görüntüleyen bir açılır menü var ve çalışıyor.

Şimdi, ilk modelin üstüne yığılmış bir sonraki modeli açtığınızda ve onu kapattığınızda, altta modal üzerinde kaydırma devre dışı kalır.

Karşılaştığım sorunu tekrarlama adımlarını da içeren tam bir örnek oluşturdum. Burada görebilirsiniz .

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

İşte davranışı eylem halinde göstermek için bir Bootply:

Bootply

Question 2

Bu aynı zamanda bir çözüm

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Otomatik iyi çalışıyor :) Bu aslında ekran boyutunuzdan daha yüksek çalışan tüm modları düzeltir.

Question 3

Eğer bir kalıcı kapattığınızda, o kaldırır olmasıdır modal-opengelen <body>etiketi. Bootstrap aynı sayfadaki birden fazla modu desteklemez (En azından BS3'e kadar).

Çalışmasını sağlamanın bir yolu, bir modeli hidden.bs.modalkapatırken BS tarafından tetiklenen olayı kullanmak , ardından modal-opensınıfı gövdeye zorlamak için başka bir modal açık olup olmadığını kontrol etmektir .

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

Question 4

Senin için bir çözüm buldum. Neden çalışmadığından emin değilim ama CSS'nizdeki tek bir satır kodu sorunu çözecektir. İkinci modeli kapattıktan sonra, bir şekilde birincisi oluyor overflow-y:hidden. autoAslında ayarlanmış olsa bile .

Bunu yeniden yazmanız ve kendi bildiriminizi CSS'de ayarlamanız gerekir:

#modal_1 {
    overflow-y:scroll;
}

Burada çalışan bir DEMO var

Düzenleme : yanlış bağlantı, üzgünüm.

Question 5

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

Question 6

Https://github.com/nakupanda/bootstrap3-dialog/issues/70 izleyin ekleyin

.modal { overflow: auto !important; }

senin css'e

Question 7

Bootstrap 4 için eklemek zorunda kaldım!

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

Bu yapılmazsa işe yaramaz ve uygulanmaz.

ekran görüntüsü

Question 8

İlk olarak, birden çok açık mod Bootstrap tarafından desteklenmez. Buraya bakın: Bootstrap Modal dokümanları

Birden çok açık mod desteklenmez. Başka biri görünürken bir modal açmadığınızdan emin olun. Bir seferde birden fazla modelin gösterilmesi özel kod gerektirir.

Ancak, gerekiyorsa, bu CSS parçasını , ana Bootstrap stil sayfasından sonra dahil edildiği sürece özel stil sayfanıza ekleyebilirsiniz :

.modal {
    overflow-y:auto;
}

Question 9

Sorunu kaldırıp data-dismiss="modal" ekleyerek çözdüm

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

Umarım yardımcı olur

Question 10

Bootstrap aynı anda birden fazla kipi desteklemiyordu. Bu bir Bootstrap Hatası. BS4 için aşağıdaki komut dosyasını eklemeniz yeterlidir.

$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
    $('body').addClass('modal-open');
}
});

Question 11

$('.modal').css('overflow-y', 'auto');

Question 12

Bunun twitter önyüklemesindeki bir hatadan kaynaklandığını varsayıyorum. Görünüşe göre modal-openiki mod açık olsa bile sınıfı vücuttan kaldırıyor . JQuery'nin removeClassişlevi için bir test yapabilir ve hala açık bir mod varsa onu atlayabilirsiniz (temel işlev için kredi şu yanıta gider: 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;
    }
})();

Question 13

Bu kodlar benimkini çözdü, ikinci pop-up kapatıldığında, ilk pop-up'ım artık kaydırılamıyor.

$('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
  }
});

Question 14

Bir çeşit hack, ancak herhangi bir tuhaf / istenmeyen davranışı ortadan kaldırmak için modal yakınlarda kapatıp yeniden açmayı seviyorum. Solmayı kapattıysanız, kapanıp yeniden açıldığını fark edemezsiniz:

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

});

Question 15

JQuery aracılığıyla 'modal-open' sınıfını gövdeye ekleyin. Parşömenin mod hariç her şeyde çalıştığını varsayıyorum.

Önceki yanıtlara bir yorum olarak: modale taşma özelliğini eklemek (CSS aracılığıyla) yardımcı olur, ancak bu durumda sayfada iki kaydırma çubuğunuz olur.

Question 16

Bu aynı zamanda bir çözüm

.modal.fade .modal-dialog{
   -webkit-transform: inherit;
}

Question 17

Aslında bunun için bir çözüm buldum. $('#myModal').hide();Bir modeli gizlemek için kullanıyorsanız , aslında sayfa gövdeniz için kaydırmayı etkinleştirmeniz gerekir . Sonrasına aşağıdaki satırı yazmanız yeterlidir $('#myModal').hide();:

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

Bu, kaydırmayı yeniden etkinleştirecektir.

Question 18

Bootstrap3 veya 4 kullanıyorsanız, html gövdesinde modal-open sınıfına sahip olduğunuzdan emin olun. Bunun zorunlu olup olmadığından emin değilim, ancak modal fon z-endeksinizin temizlendiğinden emin olabilirsiniz.

    $('.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");
    });

Question 19

Bunu js kodunun altına ekleyin

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