Bootstrap Modals tiếp tục thêm padding-right vào nội dung sau khi đóng

Tôi đang sử dụng bootstrap và Parse framework để xây dựng một ứng dụng web nhỏ. Nhưng các phương thức Bootstrap đó vẫn tiếp tục thêm phần đệm-phải vào nội dung sau khi đóng. Làm thế nào để giải quyết điều này?

Tôi đã cố gắng đặt mã này trong javascript của mình:

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

Nhưng nó không hoạt động. Có ai biết cách sửa lỗi này không?

Mã của tôi:

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

Tôi đang sử dụng bootstrap và Parse framework để xây dựng một ứng dụng web nhỏ. Nhưng các phương thức Bootstrap đó vẫn tiếp tục thêm phần đệm-phải vào nội dung sau khi đóng. Làm thế nào để giải quyết điều này?

Đây có thể là một trục trặc từ phương thức Bootstrap. Từ các thử nghiệm của tôi, có vẻ như vấn đề là nó #adminPanelđang được khởi tạo trong khi #loginModalvẫn chưa được đóng hoàn toàn. Các giải pháp thay thế có thể là loại bỏ hoạt ảnh bằng cách loại bỏ fadelớp trên #adminPanelvà #loginModalhoặc đặt thời gian chờ (~ 500ms) trước khi gọi $('#adminPanel').modal();. Hi vọng điêu nay co ich.

Tôi vừa sử dụng bản sửa lỗi css bên dưới và nó đang hoạt động đối với tôi

body { padding-right: 0 !important }

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

Vừa đổi thành

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

Một giải pháp css thuần túy giữ chức năng bootstrap như bình thường.

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

Sự cố là do một hàm trong bootstrap jQuery thêm một chút khoảng đệm bên phải khi cửa sổ phương thức mở ra, nếu có một thanh cuộn trên trang. Điều đó ngăn nội dung cơ thể của bạn thay đổi khi phương thức mở ra và đó là một tính năng hay. Nhưng nó gây ra lỗi này.

Rất nhiều giải pháp khác được đưa ra ở đây phá vỡ tính năng đó và làm cho nội dung của bạn thay đổi một chút về thời điểm mở phương thức. Giải pháp này sẽ bảo toàn tính năng của phương thức bootstrap không thay đổi nội dung xung quanh, nhưng sửa lỗi.

Nếu bạn lo lắng hơn về những padding-rightđiều liên quan thì bạn có thể làm điều này

jQuery :

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

điều này sẽ addClasscho bạn bodyvà sau đó sử dụng điều này

CSS :

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

và điều này sẽ giúp bạn thoát khỏi padding-right.

Nhưng nếu bạn cũng lo lắng về việc ẩn scrollthì bạn cũng phải thêm điều này:

CSS :

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

Đây là JSFiddle

Xin hãy xem, nó sẽ làm các thủ thuật cho bạn.

Chỉ cần mở bootstrap.min.css

Tìm dòng này (mặc định)

.modal-open{overflow:hidden;}

và thay đổi nó thành

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

Nó sẽ hoạt động cho mọi phương thức của trang web. Bạn có thể làm tràn: auto; nếu bạn muốn giữ nguyên thanh cuộn trong khi mở hộp thoại phương thức.

Tôi đã gặp vấn đề tương tự trong một thời gian RẤT dài. Không có câu trả lời nào ở đây hiệu quả! Nhưng sau đây đã sửa nó!

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

Có hai sự kiện gây ra khi đóng một phương thức, đầu tiên là nó hide.bs.modalvà sau đó là nó hidden.bs.modal. Bạn sẽ có thể sử dụng chỉ một.

sửa chữa dễ dàng

thêm lớp này

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

Nó là một ghi đè nhưng hoạt động

Tôi chỉ cần xóa fadelớp và thay đổi hiệu ứng mờ dần của lớp bằng animation.css. Hy vọng điều này có thể giúp cho bạn.

removeAttr sẽ không hoạt động, bạn sẽ xóa thuộc tính CSS như sau:

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

Không có giá trị tài sản, tài sản bị loại bỏ.

Tôi đang tải CSS bootstrap 3.3.0 mặc định và gặp sự cố tương tự. Giải quyết bằng cách thêm CSS này:

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

Điều quan trọng là vì javascript modal bootstrap thêm 15px đệm vào đúng chương trình. Tôi đoán rằng nó để bù đắp cho thanh cuộn, nhưng tôi không muốn điều đó.

Với Bootstrap 4, điều này đã làm việc cho tôi:

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

Tôi gặp vấn đề tương tự với Bootstrap 3.3.7 và giải pháp của tôi cho thanh điều hướng cố định: Thêm kiểu này vào css tùy chỉnh của bạn.

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

nó sẽ làm cho phương thức của bạn được hiển thị trong khi cửa sổ cuộn vẫn hoạt động. cảm ơn, hy vọng điều này cũng sẽ giúp bạn

Tôi biết đây là một câu hỏi cũ, nhưng không có câu trả lời nào từ đây loại bỏ được vấn đề trong các tình huống tương tự của tôi và tôi nghĩ rằng sẽ hữu ích cho một số nhà phát triển khi đọc giải pháp của tôi.

Tôi sử dụng để thêm một số CSS vào nội dung khi một phương thức được mở, trong các trang web nơi nó vẫn được sử dụng bootstrap 3.

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

Giải pháp của tôi không yêu cầu bất kỳ CSS bổ sung nào.

Như được chỉ ra bởi @Orland, một sự kiện vẫn đang xảy ra khi sự kiện kia bắt đầu. Giải pháp của tôi là chỉ bắt đầu sự kiện thứ hai (hiển thị adminPanelphương thức) khi sự kiện đầu tiên kết thúc (ẩn loginModalphương thức).

Bạn có thể thực hiện điều đó bằng cách gắn một người nghe vào hidden.bs.modalsự kiện của loginModalphương thức của bạn như bên dưới:

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

Và, khi cần thiết, chỉ cần ẩn loginModalphương thức.

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

Tất nhiên, bạn có thể triển khai logic của riêng mình bên trong người nghe để quyết định hiển thị hay không hiển thị adminPanelphương thức.

Bạn có thể biết thêm thông tin về Bootstrap Modal Events tại đây .

Chúc may mắn.

Các mẫu bootstrap bổ sung thêm phần đệm bên phải vào cơ thể nếu cơ thể bị căng tràn.

Trên bootstrap 3.3.6 (phiên bản tôi đang sử dụng), đây là hàm chịu trách nhiệm thêm padding-right vào phần tử body: https://github.com/twbs/bootstrap/blob/v3.3.6/dist/js /bootstrap.js#L1180

Một giải pháp nhanh chóng là chỉ cần ghi đè hàm đó sau khi gọi tệp bootstrap.js:

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

Điều này đã khắc phục sự cố cho tôi.

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

Đây là những gì làm việc cho tôi:

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

Chỉ cần xóa data-targetkhỏi nút và tải phương thức bằng jQuery.

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

jQuery:

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

Tôi đã tìm hiểu kỹ về javascript bootstrap và thấy rằng mã Modal đặt đúng phần đệm trong một hàm được gọi là hàm adjustDialog()được xác định trên nguyên mẫu Modal và hiển thị trên jQuery. Đặt đoạn mã sau đây ở đâu đó để ghi đè chức năng này để không làm gì đã gây khó khăn cho tôi (mặc dù tôi không biết hậu quả của việc không thiết lập điều này là gì !!)

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

Điều này có thể giải quyết vấn đề

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

Đây là một lỗi bootstrap và đã được sửa trong v4-dev: https://github.com/twbs/bootstrap/pull/18441 cho đến khi thêm lớp CSS bên dưới sẽ hữu ích.

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

Tôi đã gặp vấn đề tương tự khi sử dụng modals và ajax. Đó là vì tệp JS được tham chiếu hai lần, cả trong trang đầu tiên và trong trang được gọi bởi ajax, vì vậy khi phương thức được đóng, nó đã gọi sự kiện JS hai lần, theo mặc định, thêm một phần đệm bên phải 17px.

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

Đã làm cho tôi. Lưu ý rằng Scrollbar bị ép buộc trong nội dung - nhưng nếu bạn có trang "cuộn", điều đó không thành vấn đề (?)

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

Thử cái này

Nó sẽ thêm phần đệm bên phải 0px vào phần thân sau khi đóng phương thức.

Nó xảy ra khi bạn mở một phương thức mà phương thức trước đó vẫn chưa đóng hoàn toàn. Để khắc phục, chỉ cần mở phương thức mới tại thời điểm tất cả phương thức đóng hoàn toàn, kiểm tra mã bên dưới:

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

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

Tôi bây giờ cái này đã cũ, và tất cả các giải pháp được cung cấp ở đây có thể hoạt động. Tôi chỉ thêm một cái gì đó mới trong trường hợp có thể giúp ai đó: Tôi gặp vấn đề tương tự và nhận thấy rằng việc mở phương thức đang thêm quyền ký quỹ vào sidenav của tôi (có thể là một loại kế thừa từ phần đệm được thêm vào phần thân). Thêm {margin-right: 0! Important;} vào sidenav của tôi đã thành công.

(Bootstrap v3.3.7) Từ trình kiểm tra trình duyệt của tôi, tôi thấy rằng điều này được đặt trực tiếp trong thuộc tính kiểu phần tử , phù thủy ghi đè các thuộc tính của lớp.

Tôi đã cố gắng 'đặt lại' giá trị paddig-right khi phương thức hiển thị với:

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

Nhưng nó sẽ quay lại ngay sau khi cửa sổ được thay đổi kích thước :( (có thể là từ tập lệnh plugggin).

Giải pháp này đã làm việc cho tôi:

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

Như @Orland đã nói nếu bạn đang sử dụng một số hiệu ứng như fade thì ở đó chúng ta cần đợi trước khi hiển thị phương thức, điều này hơi khó nhưng sẽ làm được.

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

Tôi hy vọng vẫn còn ai đó cần câu trả lời này. Có một chức năng được gọi là resetScrollbar () trong bootstrap.js, vì một số lý do ngu ngốc mà các nhà phát triển đã quyết định thêm kích thước thanh cuộn vào bên phải phần đệm của cơ thể. vì vậy về mặt kỹ thuật, nếu bạn chỉ đặt phần đệm bên phải thành một chuỗi trống, nó sẽ khắc phục được sự cố