Режими завантаження продовжують додавати набивні вправо до тіла після закриття

Я використовую bootstrap і Parse Framework для створення невеликого веб-сайту. Але ці модулі Bootstrap продовжують додавати набивні вправо до тіла після закриття. Як це вирішити?

Я намагався ввести цей код у свій JavaScript:

$('.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 для створення невеликого веб-сайту. Але ці модулі Bootstrap продовжують додавати набивні вправо до тіла після закриття. Як це вирішити?

Це може бути глюк від модального Bootstrap. З моїх тестів, схоже, проблема полягає в тому, що #adminPanelвона ініціалізується, поки #loginModalще не була повністю закрита. Обхідні шляхи можуть видалити анімацію, видаливши fadeклас #adminPanelта #loginModalвстановивши тайм-аут (~ 500 мс) перед викликом $('#adminPanel').modal();. Сподіваюся, це допомагає.

Я щойно використав виправлення css нижче, і він працює на мене

body { padding-right: 0 !important }

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

Просто змінили на

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

Чисте рішення css, яке підтримує функціонал завантажувального пристрою таким, яким воно має бути.

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

Проблема викликана функцією в завантажувальній програмі jQuery, яка додає трохи підкладки вправо, коли відкриється модальне вікно, якщо на сторінці є смуга прокрутки. Це зупиняє зміщення вмісту тіла, коли модаль відкривається, і це приємна функція. Але це викликає цю помилку.

Багато інших рішень, наведених тут, порушують цю функцію і змушують ваш зміст трохи змінитись, коли модальний режим відкриється. Це рішення збереже функцію модального завантаження не зміщуючи вміст навколо, а виправляючи помилку.

Якщо вас більше турбує 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;}

Він буде працювати для кожного способу сайту. Ви можете зробити переповнення: авто; якщо ви хочете зберегти смугу прокрутки такою, якою є, під час відкриття модального діалогового вікна.

Я мав цю ж проблему ДУЖЕ довго. Жодна з відповідей тут не спрацювала! Але виправлено наступне!

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

Немає значення властивості, властивість видаляється.

Я завантажую CSS для завантаження за замовчуванням 3.3.0 і у мене була схожа проблема. Вирішено шляхом додавання цього CSS:

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

Важливо те, що модальний javascript jaotstrap додає 15 пікселів накладки праворуч програмно. Я здогадуюсь, що це компенсувати смугу прокрутки, але я цього не хочу.

З Bootstrap 4 це працювало для мене:

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

У мене така ж проблема з Bootstrap 3.3.7 і моїм рішенням для фіксованого навібара: Додавання цього стилю до вашого користувацького css

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

він відобразить ваш модальний режим, поки вікно прокрутки ще працює. дякую, сподіваюся, що це теж допоможе вам

Я знаю, що це старе питання, але жоден з відповідей не усунув цю проблему в моїх подібних ситуаціях, і я вважав, що було б корисно, щоб деякі розробники прочитали і моє рішення.

Я використовую, щоб додати трохи CSS до тіла, коли модал відкритий, на веб-сайтах, де ще використовується завантажувальний 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');

Звичайно, ви можете реалізувати власну логіку всередині слухача, щоб вирішити показати adminPanelмодальний режим чи ні .

Ви можете отримати більше інформації про Bootstrap Modal Events тут .

Удачі.

Моделі черевиків додають ту підкладку праворуч до тіла, якщо тіло переповнене.

На завантажувальній версії 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');

Я заглибився у javascript jaot і встановив, що Модальний код встановлює правильну підкладку у функції, що називається adjustDialog(), визначеної в прототипі Modal і опроміненій jQuery. Розміщення наступного коду де-небудь, щоб замінити цю функцію, щоб нічого не робити, для мене не вийшло хитрість (хоча я ще не знаю, який наслідок цього не встановити!)

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

Це може вирішити проблему

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

Це помилка завантаження та виправлена ​​у v4-dev: https://github.com/twbs/bootstrap/pull/18441, до цього могло б допомогти додавання нижче класу CSS.

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

У мене була та сама проблема з використанням модалів та 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');
    });
  }

Я зараз це по-старому, і всі запропоновані тут рішення можуть працювати. Я просто додаю щось нове на випадок, який може комусь допомогти: у мене була така ж проблема, і я помітив, що відкриття модалу додає правом маргіналу до моїх сиденів (можливо, це своєрідне успадкування від прокладки, що додається до тіла). Додавши {margin-right: 0! Важливо;} до мого сидена, зробив трюк.

(Bootstrap v3.3.7) Від мого інспектора браузера я побачив, що це безпосередньо встановлено у властивості стилю елементів , відьма перекриває властивості класу.

Я спробував "скинути" значення " paddig-right", коли модаль відображається за допомогою:

$("#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;
    }
});

Як говорить @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);

Я сподіваюся, що все ж є хтось, кому потрібна ця відповідь. У bootstrap.js є функція, що називається resetScrollbar (), з якихось дурних причин розробники вирішили додати розміри смуги прокрутки до правильної підкладки корпусу. технічно, якщо ви просто встановите правий набір на порожній рядок, це вирішить проблему