बूटस्ट्रैप मोडल इश्यू - स्क्रॉलिंग डिसेबल हो जाता है

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

Question 2

यह भी एक समाधान है

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

ऑटो ठीक काम करता है :) यह वास्तव में आपके स्क्रीन आकार से अधिक चलने वाले किसी भी मोडल को ठीक करेगा।

Question 3

ऐसा इसलिए है क्योंकि जब आप किसी मोडल को बंद करते हैं, तो यह टैग modal-openसे हटा देता है <body>। बूटस्ट्रैप एक ही पृष्ठ पर कई मॉडल्स का समर्थन नहीं करता (कम से कम BS3 तक)।

इसे काम करने का एक तरीका यह है कि hidden.bs.modalमोडल को बंद करते समय बीएस द्वारा ट्रिगर की गई घटना का उपयोग करें , फिर जांच करें कि क्या 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

मैंने तुम्हारे लिए एक उपाय खोज लिया है। मुझे यकीन नहीं है कि यह क्यों काम नहीं करता है, लेकिन आपके सीएसएस में सिर्फ एक लाइन कोड समस्या को हल करेगा। दूसरा मोडल बंद करने के बाद, पहले वाले 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; }

अपने सीएसएस के लिए

Question 7

बूटस्ट्रैप 4 के लिए मुझे जोड़ना था! महत्वपूर्ण

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

यदि यह नहीं किया जाता है, तो यह काम नहीं करता है और इसे लागू नहीं किया जाता है।

स्क्रीनशॉट

Question 8

सबसे पहले, कई खुले मोड बूटस्ट्रैप द्वारा समर्थित नहीं हैं। यहाँ देखें: बूटस्ट्रैप मोडल डॉक्स

एकाधिक खुले मोडल समर्थित नहीं हैं। सुनिश्चित करें कि एक मोडल न खोलें जबकि दूसरा अभी भी दिखाई दे रहा है। एक बार में एक से अधिक मोडल दिखाने के लिए कस्टम कोड की आवश्यकता होती है।

लेकिन, यदि आपको आवश्यक है, तो आप अपने कस्टम स्टाइलशीट में सीएसएस के इस बिट को जोड़ सकते हैं, जब तक कि यह मुख्य बूट स्टाइल स्टाइल के बाद शामिल है :

.modal {
    overflow-y:auto;
}

Question 9

मैंने हटाकर data-dismiss="modal" और जोड़कर समस्या हल की

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

आशा करता हूँ की ये काम करेगा

Question 10

बूटस्ट्रैप ने एक ही समय में कई मोडल का समर्थन नहीं किया। यह एक बूटस्ट्रैप बग है। बस नीचे बीएस 4 के लिए स्क्रिप्ट जोड़ें।

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

Question 11

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

Question 12

मुझे लगता है कि यह ट्विटर बूटस्ट्रैप में एक बग के कारण है। ऐसा लगता है modal-openकि दो मोडल खुले होने पर भी कक्षा को शरीर से हटा दिया जाता है । आप jQuery के removeClassफ़ंक्शन के लिए एक परीक्षण में जूता कर सकते हैं और इसे बाईपास कर सकते हैं यदि कोई मोडल अभी भी खुला है (आधार फ़ंक्शन के लिए क्रेडिट इस उत्तर पर जाता है: 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 के माध्यम से वर्ग 'मोडल-ओपन' को शरीर में जोड़ें। मुझे लगता है कि स्क्रॉल मोडल को छोड़कर हर चीज पर काम करता है।

पिछली प्रतिक्रियाओं के लिए एक टिप्पणी के रूप में: अतिप्रवाह संपत्ति को मोडल (सीएसएस के माध्यम से) में जोड़ने से मदद मिलती है लेकिन फिर आपके पास पृष्ठ में दो स्क्रॉल बार होंगे।

Question 16

यह भी एक समाधान है

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

Question 17

मैंने वास्तव में इसके लिए एक समाधान निकाला है। यदि आप $('#myModal').hide();किसी मॉडल को छिपाने के लिए उपयोग कर रहे हैं तो आपको वास्तव में अपने पेज बॉडी के लिए स्क्रॉलिंग को सक्षम करना होगा । बस निम्नलिखित पंक्ति लिखें $('#myModal').hide();:

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

यह स्क्रॉलिंग को फिर से सक्षम करेगा।

Question 18

यदि आप bootstrap3 या 4 का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आपके पास html बॉडी में एक क्लास मोडल-ओपन है। यदि यह अनिवार्य है तो मुझे यकीन नहीं है, लेकिन यह सुनिश्चित करें कि आपके मोडल-बैकड्रॉप का z- इंडेक्स क्लियर हो जाए।

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