বুটস্ট্র্যাপ মডেল ইস্যু - স্ক্রোলিং অক্ষম হয়ে যায়

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>

আচরণের ক্রিয়াটি দেখানোর জন্য এখানে একটি বুটপ্লি:

বুটপ্লাই

Question 2

এটিও একটি সমাধান

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

অটো সূক্ষ্মভাবে কাজ করে :) এটি আসলে কোনও স্ক্রিনের আকারের চেয়ে বেশি চলে এমন কোনও মডেল ঠিক করবে।

Question 3

কারণ আপনি যখন কোনও মডেল বন্ধ করেন, এটি ট্যাগ modal-openথেকে সরিয়ে দেয় <body>। বুটস্ট্র্যাপ একই পৃষ্ঠায় একাধিক মডেল সমর্থন করে না (কমপক্ষে বিএস 3 পর্যন্ত)।

এটিকে কাজ করার একটি উপায়, 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 আসলে ।

আপনার এটি পুনরায় লিখতে হবে এবং সিএসএসে আপনার নিজস্ব ঘোষণা সেট করতে হবে:

#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

বুটস্ট্র্যাপ একই সময়ে একাধিক মডেল সমর্থন করে না। এটি একটি বুটস্ট্র্যাপ বাগ। BS4 এর জন্য কেবল নীচের স্ক্রিপ্টটি যুক্ত করুন।

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

Question 11

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

Question 12

আমি ধরে নিই এটি টুইটার বুটস্ট্র্যাপের বাগের কারণে is 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

আপনি যদি বুটস্ট্রা 3 বা 4 ব্যবহার করে থাকেন তবে নিশ্চিত করুন যে এইচটিএমএল বডিতে আপনার ক্লাস মডেল রয়েছে। এটি বাধ্যতামূলক কিনা তা আমি নিশ্চিত নই, তবে সম্ভবত আপনার মডেল-ব্যাকড্রপের জেড-সূচি সাফ হয়ে গেছে তা নিশ্চিত করুন।

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

এটি জেএস কোডের নীচে যুক্ত করুন

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