ปัญหา Bootstrap Modal - การเลื่อนถูกปิดใช้งาน

Question 1

ฉันมีโมดอลและภายในโมดอลนั้นมีดรอปดาวน์ที่แสดงเนื้อหาที่ซ่อนอยู่ขนาดใหญ่ซึ่งใช้งานได้

ตอนนี้เมื่อคุณเปิดโมดอลถัดไปวางซ้อนกันด้านบนของโมดอลแรกและปิดการเลื่อนบนโมดอลด้านล่างจะปิดใช้งาน

ฉันได้สร้างตัวอย่างฉบับเต็มรวมถึงขั้นตอนในการจำลองปัญหาที่ฉันกำลังเผชิญอยู่ คุณสามารถดูได้ที่นี่

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

นี่คือ Bootply เพื่อแสดงพฤติกรรมในการดำเนินการ:

Bootply

Question 2

นี่ยังเป็นทางออก

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

อัตโนมัติทำงานได้ดี :) สิ่งนี้จะแก้ไขโมดอลที่ทำงานสูงกว่าขนาดหน้าจอของคุณ

Question 3

เนื่องจากเมื่อคุณปิดโมดอลมันจะลบออกmodal-openจาก<body>แท็ก Bootstrap ไม่รองรับหลาย modals ในหน้าเดียวกัน (อย่างน้อยก็จนถึง BS3)

วิธีหนึ่งที่จะทำให้มันใช้งานได้คือใช้hidden.bs.modalเหตุการณ์ที่เรียกโดย BS เมื่อปิดโมดอลจากนั้นตรวจสอบว่ามีโมดอลอื่นเปิดอยู่หรือไม่เพื่อบังคับให้modal-openคลาสในร่างกาย

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

ฉันได้พบทางออกสำหรับคุณแล้ว ฉันไม่แน่ใจว่าทำไมมันถึงใช้ไม่ได้ แต่โค้ดเพียงบรรทัดเดียวใน CSS ของคุณจะช่วยแก้ปัญหาได้ หลังจากปิดโมดอลที่สองอันแรกกำลังได้รับoverflow-y:hiddenอย่างใด แม้ว่าจะตั้งค่าเป็นautoจริงก็ตาม

คุณต้องเขียนสิ่งนี้ใหม่และตั้งค่าการประกาศของคุณเองใน CSS:

#modal_1 {
    overflow-y:scroll;
}

ที่นี่คุณมีการสาธิตที่ใช้งานได้

แก้ไข : ลิงค์ผิดขออภัย

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แอด

.modal { overflow: auto !important; }

ไปยัง css ของคุณ

Question 7

สำหรับ bootstrap 4 ฉันต้องเพิ่ม!

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

หากไม่ทำเช่นนี้จะไม่ได้ผลและไม่ได้ใช้

ภาพหน้าจอ

Question 8

ก่อนอื่น Bootstrap ไม่รองรับโมดอลแบบเปิดหลายตัว ดูที่นี่: เอกสาร Bootstrap Modal

ไม่รองรับรูปแบบการเปิดหลายรายการ อย่าเปิดโมดอลในขณะที่อีกโมดอลยังมองเห็นได้ การแสดงโมดอลมากกว่าหนึ่งครั้งต้องใช้โค้ดที่กำหนดเอง

แต่ถ้าจำเป็นคุณสามารถเพิ่ม CSS นี้ในสไตล์ชีตที่กำหนดเองได้ตราบใดที่มันรวมอยู่หลังสไตล์ชีต Bootstrap หลัก:

.modal {
    overflow-y:auto;
}

Question 9

Bootstrap ไม่รองรับหลายรูปแบบในเวลาเดียวกัน มันคือ Bootstrap Bug เพียงเพิ่มสคริปต์ด้านล่างสำหรับ BS4

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

Question 10

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

Question 11

ฉันแก้ไขปัญหาโดยการลบdata-dismiss="modal" และเพิ่ม

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

หวังว่าจะช่วยได้

Question 12

ฉันคิดว่านี่เป็นเพราะข้อผิดพลาดใน twitter bootstrap ดูเหมือนว่าจะลบmodal-openคลาสออกจากร่างกายแม้ว่าจะเปิดสองโหมด คุณสามารถทดสอบการremoveClassทำงานของ jQuery และข้ามไปได้หากยังมีโมดอลที่ยังเปิดอยู่ (เครดิตสำหรับฟังก์ชันพื้นฐานไปที่คำตอบนี้: 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

รหัสนี้แก้ไขของฉันเมื่อปิดป๊อปอัปครั้งที่สองป๊อปอัปแรกของฉันจะไม่สามารถเลื่อนได้อีกต่อไป

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

เป็นแฮ็ก แต่ฉันต้องการเพียงแค่ปิดและเปิดใหม่เมื่อมีกิริยาใกล้เคียงเพื่อกำจัดพฤติกรรมแปลก ๆ / ไม่ต้องการ หากคุณปิดการเลือนหายคุณจะไม่สังเกตเห็นว่ามันปิดและเปิดใหม่:

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 คลาส 'modal-open' ให้กับร่างกาย ฉันคิดว่าการเลื่อนใช้ได้กับทุกอย่างยกเว้นโมดอล

ตามความคิดเห็นของการตอบกลับก่อนหน้านี้: การเพิ่มคุณสมบัติล้นลงในโมดอล (ผ่าน CSS) ช่วยได้ แต่คุณจะมีแถบเลื่อนสองแถบในหน้า

Question 16

นี่ยังเป็นทางออก

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

Question 17

ฉันได้หาวิธีแก้ปัญหานี้แล้ว คุณต้องเปิดใช้งานการเลื่อนสำหรับส่วนเนื้อหาของหน้าหากคุณใช้$('#myModal').hide();เพื่อซ่อนโมเดล เพียงเขียนบรรทัดต่อไปนี้หลัง$('#myModal').hide();:

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

การดำเนินการนี้จะเปิดใช้งานการเลื่อนอีกครั้ง

Question 18

หากคุณใช้ bootstrap3 หรือ 4 ตรวจสอบให้แน่ใจว่าคุณมี class modal-open ใน html body ฉันไม่แน่ใจว่านี่เป็นข้อบังคับหรือไม่ แต่อาจตรวจสอบให้แน่ใจว่าได้ล้างดัชนี z ของ modal-backdrop แล้ว

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

เพิ่มโค้ด js ด้านล่าง

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

Question 20

ง่ายๆถ้าคุณใช้โมดอล bootstrap มากกว่าที่คุณต้องการลบ tabindex = "- 1" แทนสิ่งนี้

** วาง **