বুটস্ট্র্যাপ মোডালগুলি বন্ধ হওয়ার পরে শরীরের প্যাডিং-ডানদিকে যুক্ত করে রাখে

Question 1

আমি একটি ছোট ওয়েব অ্যাপ তৈরি করতে বুটস্ট্র্যাপ এবং পার্স ফ্রেমওয়ার্ক ব্যবহার করছি। তবে এই বুটস্ট্র্যাপ মোডালগুলি বন্ধ হয়ে যাওয়ার পরে দেহে প্যাডিং-ডান যুক্ত করে রাখে। কীভাবে সমাধান করবেন?

আমি আমার জাভাস্ক্রিপ্টে এই কোডটি রাখার চেষ্টা করেছি:

$('.modal').on('hide.bs.modal', function (e) {
    $("element.style").css("padding-right","0");
});

কিন্তু এটি কাজ করে না। কেহ এই ঠিক কিভাবে কি জানে?

আমার কোড:

        <button type="button" class="btn btn-lg btn-default" data-toggle="modal" data-target="#loginModal">Admin panel</button>

         <div id="loginModal" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-sm">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Login</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body text-center" >
                          <input class='form-control' type="text" id="userName" placeholder="Username" ng-model='username'>
                          <input class='form-control' type="password" id="password" placeholder="Password" ng-model='password'>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="loginButton" ng-click="goToAdminPanel()">Login</button>
                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>
                      </div>

                    </div>

                 </div>
                </div>
           </div>

        <div id="adminPanel" class="modal fade" role="dialog">
                  <div class="modal-dialog modal-lg">

                    <!-- Modal content -->
                    <div class="modal-content">

                      <!-- header -->
                      <div class="modal-header"> 
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">Admin Panel</h4>
                      </div>

                      <!-- body -->
                      <div class="modal-body" >

                        </div>

                      <div class="modal-footer">
                        <button type="button" class="btn btn-default" id="saveButton">Save</button>

                        <button type="button" class="btn btn-default" data-dismiss="modal" id="closeButton">Close</button>



                    </div>

                 </div>
                </div>
           </div>

    $scope.goToAdminPanel = function(){
    Parse.User.logIn($scope.username,$scope.password,{
        success: function(user){
            $('#loginModal').modal('hide');
            $('#adminPanel').modal();
        },
        error: function(user, error) {
            alert('Wrong username and/or password');
        }
    });
}

আমি একটি ছোট ওয়েব অ্যাপ তৈরি করতে বুটস্ট্র্যাপ এবং পার্স ফ্রেমওয়ার্ক ব্যবহার করছি। তবে এই বুটস্ট্র্যাপ মোডালগুলি বন্ধ হয়ে যাওয়ার পরে দেহে প্যাডিং-ডান যুক্ত করে রাখে। কীভাবে সমাধান করবেন?

Question 2

এটি বুটস্ট্র্যাপ মডেল থেকে বিচ্যুত হতে পারে। আমার পরীক্ষাগুলি থেকে মনে হচ্ছে সমস্যাটি এমনভাবে #adminPanelশুরু করা হচ্ছে যা #loginModalএখনও পুরোপুরি বন্ধ করা হয়নি। fadeকর্মক্ষেত্রগুলি ক্লাস চালু করে #adminPanelএবং #loginModalকল করার আগে একটি টাইমআউট (~ 500ms) সেট করে অ্যানিমেশনটি সরিয়ে ফেলতে পারে $('#adminPanel').modal();। আশাকরি এটা সাহায্য করবে.

Question 3

আমি স্রেফ নীচে সিএসএস ফিক্স ব্যবহার করেছি এবং এটি আমার জন্য কাজ করছে

body { padding-right: 0 !important }

Question 4

.modal-open {
    padding-right: 0px !important;
}

সবেমাত্র পরিবর্তিত হয়েছে

.modal {
    padding-right: 0px !important;
}

Question 5

একটি খাঁটি সিএসএস সমাধান যা বুটস্ট্র্যাপের কার্যকারিতা যেমন হওয়া উচিত তেমন রাখে।

body:not(.modal-open){
  padding-right: 0px !important;
}

বুটস্ট্র্যাপ jQuery এর কোনও ফাংশনের কারণে সমস্যাটি দেখা দেয় যা কোনও মোডাল উইন্ডো খোলার সময় কিছুটা প্যাডিং-ডান যুক্ত করে, যদি পৃষ্ঠায় কোনও স্ক্রোল বার থাকে। এটি যখন মডেলটি খুলবে তখন আপনার দেহের সামগ্রীগুলি স্থানান্তরিত হওয়া বন্ধ করে দেয় এবং এটি একটি দুর্দান্ত বৈশিষ্ট্য। তবে এটি এই বাগটি সৃষ্টি করছে।

এখানে প্রদত্ত অন্যান্য অনেকগুলি সমাধান সেই বৈশিষ্ট্যটি ভেঙে দেয় এবং মোডালটি খুললে আপনার সামগ্রীটি কিছুটা বদলে যায় make এই সমাধানটি বুটস্ট্র্যাপ মডেলের বৈশিষ্ট্যটি সংরক্ষণ করবে না সামগ্রীকে ঘুরিয়ে না দিয়ে বাগ সংশোধন করবে।

Question 6

আপনি যদি padding-rightসম্পর্কিত বিষয়ে আরও উদ্বিগ্ন হন তবে আপনি এটি করতে পারেন

jQuery :

$('#loginModal').on('show.bs.modal', function (e) {
     $('body').addClass('test');
});

এটি addClassআপনার bodyএবং তারপরে এটি ব্যবহার করবে

সিএসএস :

.test[style] {
     padding-right:0 !important;
 }

এবং এটি আপনাকে পরিত্রাণ পেতে সহায়তা করবে padding-right।

তবে আপনি যদি লুকানোর বিষয়েও উদ্বিগ্ন হন scrollতবে আপনাকে এটিও যুক্ত করতে হবে:

সিএসএস :

.test.modal-open {
    overflow: auto;
 }

এখানে জেএসফিডাল

দয়া করে একবার দেখুন, এটি আপনার জন্য কৌশলটি করবে।

Question 7

কেবল বুটস্ট্রাপ.মিনি.সিএসএস খুলুন

এই লাইনটি অনুসন্ধান করুন (ডিফল্ট)

.modal-open{overflow:hidden;}

এবং এটি হিসাবে পরিবর্তন করুন

.modal-open{overflow:auto;padding-right:0 !important;}

এটি সাইটের প্রতিটি মডেলের জন্য কাজ করবে। আপনি ওভারফ্লো করতে পারেন: অটো; আপনি যদি মডেল ডায়ালগটি খোলার সময় স্ক্রোলবারকে ঠিক তেমন রাখতে চান।

Question 8

খুব দীর্ঘ সময় ধরে আমার একই সমস্যা ছিল। এখানে উত্তর কোনটিই কাজ করেনি! কিন্তু নিম্নলিখিত এটি স্থির!

$(document.body).on('hide.bs.modal,hidden.bs.modal', function () {
    $('body').css('padding-right','0');
});

দু'টি ইভেন্ট রয়েছে যা একটি মডেল বন্ধ হওয়ার পরে আগুন জ্বলে, প্রথমত এটি hide.bs.modalএবং তারপরে এটি hidden.bs.modal। আপনার কেবল একটি ব্যবহার করতে সক্ষম হওয়া উচিত।

Question 9

সহজ ফিক্স

এই ক্লাস যুক্ত করুন

.modal-open {
    overflow: hidden;
    padding-right: 0 !important;
}

এটি একটি ওভাররাইড কিন্তু কাজ করে

Question 10

আমি সবেমাত্র fadeক্লাসটি সরিয়ে দিয়ে ক্লাসের বিবর্ণ প্রভাবটি পরিবর্তন করেছি animation.css। আমি আশা করি এটি সাহায্য করবে

Question 11

অপসারণআউটআর এই জাতীয় সিএসএস সম্পত্তি মুছে ফেলতে কাজ করবে না:

        $('.modal').on('hide.bs.modal', function (e) {
            e.stopPropagation();
            $('body').css('padding-right','');
        });

সম্পত্তির কোনও মূল্য না থাকলে সম্পত্তি সরিয়ে ফেলা হয়।

Question 12

আমি ডিফল্ট বুটস্ট্র্যাপ ৩.৩.০ সিএসএস লোড করছি এবং একই রকম সমস্যা ছিল। এই সিএসএস যুক্ত করে সমাধান করা:

body.modal-open { overflow:inherit; padding-right:inherit !important; }

গুরুত্বপূর্ণ! বুটস্ট্রাপ মোডাল জাভাস্ক্রিপ্ট ডান প্রোগ্রামাগ্রামিকভাবে 15px প্যাডিং যুক্ত করে। আমার ধারণা এটি স্ক্রোলবারের জন্য ক্ষতিপূরণ দেওয়ার জন্য, তবে আমি এটি চাই না।

Question 13

বুটস্ট্র্যাপ 4 দিয়ে এটি আমার পক্ষে কাজ করেছে:

$(selector).on('hide.bs.modal', function (e) {
    $('body').css('padding-right','0');
});

Question 14

বুটস্ট্র্যাপ ৩.৩..7 এবং ফিক্সড নববারের জন্য আমার সমাধানের ক্ষেত্রে আমার একই সমস্যা: আপনার কাস্টম সিএসএসে এই স্টাইলটি যুক্ত করা।

.modal-open {
    padding-right: 0px !important;
    overflow-y: scroll;
}

স্ক্রোল উইন্ডোটি এখনও কাজ করার সময় এটি আপনার মডেলটি প্রদর্শন করবে। ধন্যবাদ, আশা করি এটি আপনাকেও সহায়তা করবে

Question 15

আমি জানি এটি একটি পুরানো প্রশ্ন, তবে এখান থেকে উত্তরের কোনও উত্তরই আমার অনুরূপ পরিস্থিতিতে সমস্যাটি সরিয়ে দেয় না এবং আমি ভেবেছিলাম যে এটি কিছু বিকাশকারীদের জন্য আমার সমাধানটি পড়াও কার্যকর হবে।

যে ওয়েবসাইটগুলিতে এটি এখনও বুটস্ট্র্যাপ 3 ব্যবহার করা হয় সেখানে মডেল খোলার সময় আমি শরীরে কিছু সিএসএস যুক্ত করতে ব্যবহার করি।

body.modal-open{
            padding-right: 0!important;
            overflow-y:scroll;
            position: fixed;
        }

Question 16

আমার সমাধানের জন্য কোনও অতিরিক্ত সিএসএসের প্রয়োজন নেই।

@ অরল্যান্ড দ্বারা চিহ্নিত হিসাবে, অন্য ইভেন্ট শুরু হওয়ার পরে একটি ইভেন্ট এখনও ঘটছে। আমার সমাধানটি দ্বিতীয় ইভেন্টটি শুরু করার ( adminPanelমডেলটি দেখানো ) কেবলমাত্র যখন প্রথম ইভেন্টটি শেষ হয় (লুকিয়ে থাকে)loginModal মডেলটি রাখছে)।

নীচের মতো hidden.bs.modalআপনার loginModalমডেলের ইভেন্টটিতে শ্রোতাদের সংযুক্ত করে আপনি তা অর্জন করতে পারেন :

$('#loginModal').on('hidden.bs.modal', function (event) {
    $('#adminPanel').modal('show');
}

এবং, যখন প্রয়োজন হয়, কেবল loginModalমডেলটি লুকান ।

$('#loginModal').modal('hide');

কিউসের মাধ্যমে আপনি শ্রোতার অভ্যন্তরে আপনার নিজের যুক্তিটি বাস্তবায়ন করতে পারেন যাতে না দেখানোর সিদ্ধান্ত নেওয়া হয় adminPanel ।

আপনার কাছে আরো বুটস্ট্র্যাপ মোডাল ঘটনাবলী আরও তথ্য পেতে পারেন এখানে ।

শুভকামনা।

Question 17

বুটস্ট্র্যাপ মডেলগুলি যদি শরীরটি উপচে ফেলা হয় তবে প্যাডিং-ডানটি দেহে যুক্ত করে।

বুটস্ট্র্যাপ ৩.৩..6 এ (আমি যে সংস্করণটি ব্যবহার করছি) এটি হ'ল দেহ উপাদানটিতে প্যাডিং-ডান যুক্ত করার জন্য দায়ী ফাংশন: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

একটি দ্রুত কর্মক্ষেত্র হ'ল বুটস্ট্র্যাপ.জেএস ফাইলটি কল করার পরে কেবল সেই ফাংশনটি ওভাররাইট করা:

$.fn.modal.Constructor.prototype.setScrollbar = function () { };

এটি আমার জন্য সমস্যাটি স্থির করেছে।

Question 18

body.modal-open{
  padding-right: 0 !important;
}

Question 19

এটিই আমার পক্ষে কাজ করেছে:

body.modal-open {
    overflow: auto !important;
}

// Bootstrap uses JS to set the element style so you can
// override those styles like this
body.modal-open[style] {
    padding-right: 0px !important;
}

Question 20

কেবল data-targetবোতামটি থেকে সরান এবং jQuery ব্যবহার করে মডেলটি লোড করুন।

<button id='myBtn' data-toggle='modal'>open modal</button>

jQuery:

$("#myBtn").modal('show');

Question 21

আমি বুটস্ট্র্যাপ জাভাস্ক্রিপ্টে খনন করে দেখলাম যে মোডাল কোড একটি ফাংশনে ডান প্যাডিং সেট করে adjustDialog()যা মোডাল প্রোটোটাইপের উপর সংজ্ঞায়িত হয় এবং jQuery এ প্রকাশিত হয়। কিছু না করার জন্য এই ফাংশনটিকে ওভাররাইড করার জন্য নীচের কোডটি কোথাও রেখে আমার পক্ষে কৌতুকটি করেনি (যদিও আমি জানি না যে এটি সেট না করার পরিণতি এখনও কী !!)

$.fn.modal.Constructor.prototype.adjustDialog = function () { };

Question 22

এটি সমস্যার সমাধান করতে পারে

.shop-modal.modal.fade.in {
    padding-right: 0px !important;
}

Question 23

এটি একটি বুটস্ট্র্যাপ বাগ এবং v4-dev এ ঠিক করা হয়েছে: https://github.com/twbs/bootstrap/pull/18441 ততক্ষণে সিএসএস বর্গের নীচে যোগ করাতে সহায়তা করা উচিত।

.fixed-padding {
  padding-right: 0px !important;
}

Question 24

মডেল এবং এজাক্স ব্যবহার করে আমার একই সমস্যা ছিল। এটি ছিল কারণ জেএস ফাইলটি দু'বার প্রথম পৃষ্ঠায় এবং এজাক্স দ্বারা ডাকা পৃষ্ঠায় দু'বার উল্লেখ করা হয়েছিল, সুতরাং মোডাল বন্ধ হয়ে গেলে, এটি দু'বারের মতো জেএস ইভেন্টটিকে ডাকা হয়, ডিফল্টরূপে, 17px এর প্যাডিং-রাইট যোগ করে।

Question 25

body {
    padding-right: 0 !important;
    overflow-y: scroll!important;
}

আমার জন্য কাজ করেছেন। মনে রাখবেন যে স্ক্রোলবারটি দেহে বাধ্য করা হয়েছে - তবে আপনার যদি যাইহোক "স্ক্রোলিং" পৃষ্ঠা থাকে তবে তাতে কোনও সমস্যা নেই (?)

Question 26

$('.modal').on('hide.bs.modal,hidden.bs.modal', function () {
 setTimeout(function(){
  $('body').css('padding-right',0);
 },1000);
});

এটা চেষ্টা কর

এটি মডেল বন্ধ হওয়ার পরে শরীরে ডান 0px প্যাডিং যুক্ত করবে।

Question 27

আপনি যখন কোনও মডেল খোলেন তখন এটি ঘটে থাকে যে পূর্ববর্তী মডেলটি এখনও সম্পূর্ণ বন্ধ নয়। এটি ঠিক করার জন্য সমস্ত মডেল সম্পূর্ণ বন্ধ রয়েছে এমন সময়ে কেবল নতুন মডেলটি খুলুন, নীচের কোডগুলি চেক করুন:

  showModal() {
    let closeModal = $('#your-modal');

    closeModal.modal('hide');
    closeModal.on('hidden.bs.modal', function() {
      $('#new-open-modal').modal('show');
    });
  }

Question 28

আমি এখন এটি পুরানো, এবং এখানে প্রদত্ত সমস্ত সমাধান কার্যকর হতে পারে। কাউকে সাহায্য করতে পারে এমন ক্ষেত্রে আমি কেবল নতুন কিছু যুক্ত করছি: আমার একই সমস্যা ছিল এবং লক্ষ্য করেছি যে মোডালটি খোলার ফলে আমার সিডেনাভের একটি প্রান্তিক অধিকার যুক্ত হচ্ছে (সম্ভবত প্যাডিং থেকে দেহের সাথে এক ধরণের উত্তরাধিকার যোগ হবে)। S মার্জিন-রাইট যোগ করা: 0! গুরুত্বপূর্ণ; my আমার সিডনেভটি কৌশলটি করেছে।

Question 29

(বুটস্ট্র্যাপ v3.3.7) আমার ব্রাউজার পরিদর্শকের কাছ থেকে আমি দেখেছি যে এটি সরাসরি উপাদান শৈলীর বৈশিষ্ট্যে সেট করা আছে , ডাইনী শ্রেণীর বৈশিষ্ট্যগুলিকে ওভাররাইড করে।

মোডালটি যখন দেখায় তখন আমি প্যাডডিগ-রাইট মানটি 'রিসেট' করার চেষ্টা করেছি:

$("#myModal").on('shown.bs.modal', function(){
    $(this).css({paddingRight:""});
});

উইন্ডোটি পুনরায় আকার দেওয়ার সাথে সাথে এটি আবার ফিরে আসবে :( (প্লাগিন স্ক্রিপ্ট থেকে সম্ভবত))।

এই সমাধানটি আমার পক্ষে কাজ করেছে:

var modal_needfix=true;
$("#myModal").on('shown.bs.modal', function(){
    var modalscope=$(this);
    modalscope.css({paddingRight:""});
    if(modal_needfix){
        window.addEventListener("resize",function(){
            requestAnimationFrame(function(){// be sure to act after the pluggin script
                modalscope.css({paddingRight:""});
            });
        });
        modal_needfix=false;
    }
});

Question 30

@ অরল্যান্ড যেমন বলেছে যে আপনি যদি বিবর্ণের মতো কিছু ব্যবহার করছেন তবে সেখানে মডেলটি প্রদর্শন করার আগে আমাদের অপেক্ষা করা দরকার, এটি কিছুটা হ্যাকি তবে কৌশলটি করবে।

function defer(fn, time) {
    return function () {
        var args = arguments,
            context = this;

        setTimeout(function () {
            fn.apply(context, args);
        }, time);
    };
}

$.fn.modal.Constructor.prototype.show = defer($.fn.modal.Constructor.prototype.show, 350);

Question 31

আমি আশা করি এখনও কেউ আছেন যার উত্তর প্রয়োজন needs বুটস্ট্র্যাপ.জেজেসে রিসেটস্রোলবার () নামে একটি ফাংশন রয়েছে, কিছু বোকা কারণে বিকাশকারীরা শরীরের প্যাডিংয়ের ডানদিকে স্ক্রোলবারের মাত্রাগুলি যুক্ত করার সিদ্ধান্ত নিয়েছিল। সুতরাং প্রযুক্তিগতভাবে আপনি যদি খালি স্ট্রিংয়ের জন্য ডান-প্যাডিং সেট করেন তবে সমস্যাটি ঠিক হয়ে যাবে