Bootstrap Modals ยังคงเพิ่มช่องว่างภายในให้กับร่างกายหลังจากปิดแล้ว

ฉันใช้ bootstrap และ Parse framework เพื่อสร้าง webapp ขนาดเล็ก แต่วิธีการ Bootstrap เหล่านั้นยังคงเพิ่มช่องว่างภายในให้กับร่างกายหลังจากปิดแล้ว วิธีแก้ปัญหานี้?

ฉันพยายามใส่รหัสนี้ในจาวาสคริปต์ของฉัน:

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

ฉันใช้ bootstrap และ Parse framework เพื่อสร้าง webapp ขนาดเล็ก แต่วิธีการ Bootstrap เหล่านั้นยังคงเพิ่มช่องว่างภายในให้กับร่างกายหลังจากปิดแล้ว วิธีแก้ปัญหานี้?

นี่อาจเป็นความผิดพลาดจากโมดอล Bootstrap จากการทดสอบของฉันดูเหมือนว่าปัญหา#adminPanelกำลังเริ่มต้นในขณะที่#loginModalยังไม่ถูกปิดทั้งหมด วิธีการแก้ปัญหาสามารถลบภาพเคลื่อนไหวโดยการลบfadeชั้นบน#adminPanelและ#loginModalหรือตั้งค่าหมดเวลา (~ 500ms) $('#adminPanel').modal();ก่อนที่จะเรียก หวังว่านี่จะช่วยได้

ฉันเพิ่งใช้ css fix ด้านล่างและมันใช้งานได้สำหรับฉัน

body { padding-right: 0 !important }

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

เพิ่งเปลี่ยนเป็น

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

โซลูชัน css บริสุทธิ์ที่ช่วยให้การทำงานของ bootstrap ตามที่ควรจะเป็น

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

ปัญหาเกิดจากฟังก์ชันใน bootstrap jQuery ที่เพิ่มช่องว่างด้านขวาเล็กน้อยเมื่อหน้าต่างโมดอลเปิดขึ้นหากมีแถบเลื่อนบนหน้า ซึ่งจะหยุดเนื้อหาในร่างกายของคุณที่ขยับไปมาเมื่อโมดอลเปิดขึ้นและเป็นคุณสมบัติที่ดี แต่มันทำให้เกิดข้อผิดพลาดนี้

วิธีแก้ปัญหาอื่น ๆ อีกมากมายที่ให้ไว้ที่นี่จะทำลายคุณสมบัตินั้นและทำให้เนื้อหาของคุณเปลี่ยนไปเล็กน้อยเกี่ยวกับเวลาที่โมดอลเปิดขึ้น โซลูชันนี้จะรักษาคุณสมบัติของโมดอล bootstrap ไม่ให้เปลี่ยนเนื้อหาไปรอบ ๆ แต่แก้ไขข้อบกพร่อง

หากคุณกังวลมากขึ้นเกี่ยวpadding-rightกับสิ่งที่เกี่ยวข้องคุณสามารถทำได้

jQuery :

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

สิ่งนี้จะaddClassเป็นของคุณbodyแล้วใช้สิ่งนี้

CSS :

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

padding-rightและสิ่งนี้จะช่วยให้คุณได้รับการกำจัด

แต่ถ้าคุณกังวลเกี่ยวกับการซ่อนscrollคุณต้องเพิ่มสิ่งนี้ด้วย:

CSS :

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

นี่คือJSFiddle

โปรดดูมันจะทำเคล็ดลับสำหรับคุณ

เพียงแค่เปิด bootstrap.min.css

ค้นหาบรรทัดนี้ (ค่าเริ่มต้น)

.modal-open{overflow:hidden;}

และเปลี่ยนเป็น

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

มันจะใช้ได้กับทุกโมดอลของไซต์ คุณสามารถทำ overflow: auto; หากคุณต้องการให้แถบเลื่อนเหมือนเดิมในขณะที่เปิดกล่องโต้ตอบโมดอล

ฉันมีปัญหาเดียวกันนี้มาเป็นเวลานานมาก ไม่มีคำตอบใดที่ได้ผล! แต่ต่อไปนี้แก้ไขได้!

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

มีสองเหตุการณ์ที่ไฟบนปิดกิริยาเป็นครั้งแรกมันเป็นแล้วมันเป็นhide.bs.modal hidden.bs.modalคุณควรจะใช้เพียงอันเดียว

แก้ไขง่าย

เพิ่มชั้นเรียนนี้

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

มันเป็นการแทนที่ แต่ใช้งานได้

ฉันเพียงแค่ออกระดับและเปลี่ยนผลระดับจางด้วยfade animation.cssฉันหวังว่านี่จะช่วยได้

removeAttr ไม่ทำงานคุณจะลบคุณสมบัติ CSS เช่นนี้:

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

โดยไม่มีค่าคุณสมบัติคุณสมบัติจะถูกลบออก

ฉันกำลังโหลด bootstrap 3.3.0 CSS เริ่มต้นและมีปัญหาคล้ายกัน แก้ไขได้โดยการเพิ่ม CSS นี้:

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

ที่สำคัญคือเนื่องจาก bootstrap modal javascript เพิ่มช่องว่างภายใน 15px ไปทางขวาโดยใช้โปรแกรม ฉันเดาว่ามันเพื่อชดเชยแถบเลื่อน แต่ฉันไม่ต้องการอย่างนั้น

ด้วย Bootstrap 4 สิ่งนี้ใช้ได้กับฉัน:

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

ฉันมีปัญหาเดียวกันกับ Bootstrap 3.3.7 และวิธีแก้ปัญหาสำหรับ navbar คงที่: การเพิ่มสไตล์นี้ใน css ที่คุณกำหนดเอง

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

มันจะทำให้โมดอลของคุณแสดงในขณะที่หน้าต่างเลื่อนยังทำงานอยู่ ขอบคุณหวังว่านี่จะช่วยคุณได้เช่นกัน

ฉันรู้ว่านี่เป็นคำถามเก่า แต่ไม่มีคำตอบใดจากที่นี่ได้ลบปัญหาในสถานการณ์ที่คล้ายกันของฉันและฉันคิดว่ามันจะเป็นประโยชน์สำหรับนักพัฒนาบางคนในการอ่านวิธีแก้ปัญหาของฉันด้วย

ฉันใช้เพื่อเพิ่ม CSS ให้กับร่างกายเมื่อมีการเปิดโมดอลในเว็บไซต์ที่ยังคงใช้ bootstrap 3

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

โซลูชันของฉันไม่ต้องการ CSS เพิ่มเติมใด ๆ

ตามที่ @Orland ชี้ไว้เหตุการณ์หนึ่งยังคงเกิดขึ้นเมื่ออีกเหตุการณ์เริ่มต้น วิธีแก้ปัญหาของฉันคือการเริ่มต้นเหตุการณ์ที่สอง (แสดงadminPanelโมดอล) เฉพาะเมื่อเหตุการณ์แรกเสร็จสิ้น (การซ่อนloginModalโมดอล)

คุณสามารถทำได้โดยแนบผู้ฟังเข้ากับhidden.bs.modalเหตุการณ์ของloginModalกิริยาของคุณดังต่อไปนี้:

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

และเมื่อจำเป็นเพียงแค่ซ่อนloginModalโมดอล

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

ของ couse คุณสามารถใช้ตรรกะของคุณเองในฟังเพื่อตัดสินใจที่จะแสดงหรือไม่แสดงadminPanelกิริยา

คุณสามารถได้รับข้อมูลเพิ่มเติมเกี่ยวกับเงินทุน Modal กิจกรรมที่นี่

โชคดี.

รุ่น Bootstrap จะเพิ่มช่องว่างให้กับร่างกายหากร่างกายล้น

ใน bootstrap 3.3.6 (เวอร์ชันที่ฉันใช้) นี่คือฟังก์ชั่นที่รับผิดชอบในการเพิ่มช่องว่างภายในให้กับองค์ประกอบของร่างกาย: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

วิธีแก้ปัญหาอย่างรวดเร็วคือการเขียนทับฟังก์ชันนั้นหลังจากเรียกไฟล์ bootstrap.js:

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

สิ่งนี้ช่วยแก้ปัญหาให้ฉันได้

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

นี่คือสิ่งที่ใช้ได้ผลสำหรับฉัน:

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;
}

เพียงแค่ลบออกdata-targetจากปุ่มและโหลดโมดอลโดยใช้ jQuery

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

jQuery:

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

ฉันขุดเข้าไปใน bootstrap javascript และพบว่ารหัส Modal ตั้งค่าช่องว่างที่ถูกต้องในฟังก์ชันที่เรียกว่าadjustDialog()ซึ่งกำหนดไว้ในต้นแบบ Modal และเปิดเผยบน jQuery การวางโค้ดต่อไปนี้ไว้ที่ใดที่หนึ่งเพื่อแทนที่ฟังก์ชันนี้เพื่อไม่ทำอะไรเลยเป็นการหลอกลวงสำหรับฉัน (แม้ว่าฉันจะไม่รู้ว่าผลของการไม่ตั้งค่านี้เป็นอย่างไร !!)

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

สิ่งนี้สามารถแก้ปัญหาได้

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

นี่คือข้อผิดพลาด bootstrap และแก้ไขใน v4-dev: https://github.com/twbs/bootstrap/pull/18441 จนกว่าจะเพิ่มคลาส CSS ด้านล่างน่าจะช่วยได้

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

ฉันมีปัญหาเดียวกันกับการใช้ modals และ ajax เป็นเพราะไฟล์ JS ถูกอ้างถึงสองครั้งทั้งในหน้าแรกและในหน้าที่เรียกโดย ajax ดังนั้นเมื่อปิดโมดอลจึงเรียกเหตุการณ์ JS สองครั้งซึ่งโดยค่าเริ่มต้นจะเพิ่มช่องว่างด้านขวาเป็น 17px

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

ทำงานให้ฉัน โปรดทราบว่าแถบเลื่อนถูกบังคับในร่างกาย แต่ถ้าคุณมีหน้า "เลื่อน" อยู่แล้วก็ไม่เป็นไร (?)

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

ลองทำตามนี้

มันจะเพิ่มช่องว่างในด้านขวา 0px ให้กับร่างกายหลังจากปิดกิริยาแล้ว

มันเกิดขึ้นเมื่อคุณเปิดโมดอลที่โมดอลก่อนหน้านี้ยังไม่ปิดสนิท หากต้องการแก้ไขเพียงแค่เปิดโมดอลใหม่ในเวลาที่โมดอลทั้งหมดปิดสนิทให้ตรวจสอบรหัสด้านล่าง:

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

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

ตอนนี้ฉันเก่าแล้วและโซลูชันทั้งหมดที่มีให้ที่นี่อาจใช้งานได้ ฉันเพิ่งเพิ่มสิ่งใหม่ ๆ ในกรณีที่สามารถช่วยใครบางคนได้: ฉันมีปัญหาเดียวกันและสังเกตเห็นว่าการเปิดโมดอลกำลังเพิ่มขอบขวาให้กับ sidenav ของฉัน (อาจเป็นมรดกจากการเพิ่มช่องว่างภายในร่างกาย) การเพิ่ม {margin-right: 0! important;} ให้กับ sidenav ของฉันได้เคล็ดลับ

(Bootstrap v3.3.7) จากตัวตรวจสอบเบราว์เซอร์ของฉันฉันเห็นว่าสิ่งนี้ถูกตั้งค่าโดยตรงในคุณสมบัติสไตล์องค์ประกอบแม่มดจะแทนที่คุณสมบัติของคลาส

ฉันพยายาม 'รีเซ็ต' ค่าpaddig-rightเมื่อโมดอลแสดงด้วย:

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

แต่จะกลับมาทันทีที่ปรับขนาดหน้าต่าง :( (น่าจะเป็นจากสคริปต์ pluggin)

วิธีนี้ใช้ได้ผลสำหรับฉัน:

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;
    }
});

ดังที่ @Orland กล่าวว่าหากคุณใช้เอฟเฟกต์บางอย่างเช่นจางเราจำเป็นต้องรอก่อนที่จะแสดงโมดอลนี่เป็นบิตที่แฮ็ก แต่จะทำเคล็ดลับ

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);

ฉันหวังว่ายังมีใครบางคนที่ต้องการคำตอบนี้ มีฟังก์ชั่นที่เรียกว่า resetScrollbar () ใน bootstrap.js ด้วยเหตุผลโง่ ๆ นักพัฒนาจึงตัดสินใจเพิ่มขนาดแถบเลื่อนลงในช่องว่างภายในของร่างกาย ดังนั้นในทางเทคนิคหากคุณตั้งค่าช่องว่างด้านขวาเป็นสตริงว่างก็จะแก้ไขปัญหาได้