Masalah Modal Bootstrap - Pengguliran Dinonaktifkan

91

Saya memiliki modal dan di dalam modal itu, ada dropdown yang menampilkan konten tersembunyi besar, yang berfungsi.

Sekarang ketika Anda membuka modal berikutnya, ditumpuk di atas modal pertama dan menutupnya, pengguliran modal di bawahnya menjadi dinonaktifkan.

Saya telah membuat contoh lengkap, termasuk langkah-langkah untuk mereplikasi masalah yang saya hadapi. Anda bisa melihatnya di sini .

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

Here's a Bootply to show the behaviour in action:

Bootply

jquery html twitter-bootstrap Carl Smith
sumber
1
"Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code", and also violates the purpose for which modals were intended.
Blazemonger
See also stackoverflow.com/a/24914782/58241 which contains a fix not only for the scrollbar issue but for styling issues as well
benrwb

Jawaban:

119

This is also a solution

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Auto works fine :) This will actually fix any modal that runs higher than your screen size.

Jake Taylor
sumber
5
This solution solved my problem, while closing and opening modals from jQuery $('.modal').css('overflow-y', 'auto');
Gla
Life savior) Thank you
Victor Gorban
66

This is because when you close a modal, it removes the modal-open from the <body> tag. Bootstrap doesn't support multiple modals on the same page (At least until BS3).

One way to make it work, is to use the hidden.bs.modal event triggered by BS when closing a modal, then check if there is anyother modal open in order to force the modal-open class on the body.

// 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
sumber
10
(BS4) First answer I could get to work, just had to use ($('.modal.show').length > 0) for Bootstrap 4.
Shoejep
Thanks - my issue wasn't quite the same but your comment pointed me to the modal-open class on body which is the cause of the lost page scroll action.
Jon
37

I have found a solution for you. I'm not sure why it doesn't work but just one line code in your CSS will solve the problem. After closing second modal, the first one are getting overflow-y:hidden somehow. Even if its set to auto actually.

You need to rewrite this and set your own declaration in CSS:

#modal_1 {
    overflow-y:scroll;
}

Here you have a working DEMO

Edit: wrong link, sorry.

Kamil
sumber
not working, it makes container scrollable but makes mouse wheel stucked also
Kiran Maniya
19 
$(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
sumber
3
IMO this is best answer. Adding the extra css for overflow-y: auto works too but as mentioned below, results in double scrollbars.
Jacob Rutherford
1
Works with Bootstrap 4.1 too. Appreciated
Willi
1
Agreed. tested 2-3 answers and this one works for Twitter Bootstrap 4.2.1.
Tpojka
11

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

.modal { overflow: auto !important; }

to your css

truongpmcs
sumber
2
this solution would create two scrollbars
Weijing Jay Lin
there are so many solution here that they said is working, i picked this one because of simplicity. worked perfectly for me. upvoted.
kapitan
9

For bootstrap 4 I had to add !Important

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

If this is not done, it does not work and it is not applied.

screenshot

Manu Burrero Sánchez
sumber
6

First off, multiple open modals are not supported by Bootstrap. See here: Bootstrap Modal docs

Multiple open modals not supported. Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

But, if you must, you can add this bit of CSS in your custom stylesheet, as long as it's included after the main Bootstrap stylesheet:

.modal {
    overflow-y:auto;
}
FastTrack
sumber
3

I solved the issue by removing data-dismiss="modal" and adding

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

Hope it helps

Sunny A
sumber
Thanks @Sunny I don't know why other solutions are not worked for me but this one is definitely worked
dev-masih
@MasihAkbari it could be version issue :) This one is also help me. I'm using BS4. It might have a little performance issue due to delay, but this is quick easy fix.
Weijing Jay Lin
3

Bootstrap did not support multiple modals at the same time. It is a Bootstrap Bug. Just add the below script for BS4.

$('body').on('hidden.bs.modal', function () {
if($('.modal.show').length > 0)
{
    $('body').addClass('modal-open');
}
});
ashish dwivedi
sumber
3 
$('.modal').css('overflow-y', 'auto');
Usman Asif
sumber
2

I assume this is because of a bug in twitter bootstrap. It seems to remove the modal-open class from the body even if two modals were open. You can shoe in a test for jQuery's removeClass function and bypass it if there's a modal still open (credit for the base function goes to this answer: 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
sumber
As mentioned by @Blazemonger, Bootstrap explicitly doesn't support stacking modals
cvrebert
1

This codes solved mine,when second popup closed, my first popup can't scroll any more.

$('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
sumber
1

Kind of a hack , but I like to just close and reopen it upon modal close to do away with any weird/unwanted behavior. If you have fade turned off then you cannot notice it closing and reopening:

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

Add via JQuery the class 'modal-open' to the body. I presume that the scroll works on everything except the modal.

As a comment to the previous responses : adding the overflow property to the modal ( via CSS ) helps but then you will have two scroll bars in the page .


sumber
0

This is also a solution

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

I have actually figured out a solution for this. You actually need to enable the scrolling for your page body if you are using $('#myModal').hide(); to hide a model. Just write the following line after $('#myModal').hide();:

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

This will re-enable the scrolling.

Jordan
sumber
0

If you are using bootstrap3 or 4, make sure you have a class modal-open in html body. I am not sure if this is mandatory, but maybe make sure your z-index of modal-backdrop is cleared.

    $('.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
sumber
0

Add this below js code

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