1

Тема: зсувається сторінка після модального вікна

Добавив на сторінку сайту модальне вікно, бутстрапівське. При відкриванні, сторінка з'їжджає, закриваю, трохи вертається на зад і знов з'їжджає. Код модаля:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem cum nam et alias nesciunt, ipsam ad quasi libero vero aliquid eaque nisi fuga illo omnis ea iste fugit debitis eius.</p>
    </div>
  </div>
</div>

Читав що таке буває через скроли. Може хтось стикався і знає як виправити?

2 Востаннє редагувалося mike (29.01.2017 15:22:37)

Re: зсувається сторінка після модального вікна

navchalkin написав:

Добавив на сторінку сайту модальне вікно, бутстрапівське. При відкриванні, сторінка з'їжджає, закриваю, трохи вертається на зад і знов з'їжджає. Код модаля:

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem cum nam et alias nesciunt, ipsam ad quasi libero vero aliquid eaque nisi fuga illo omnis ea iste fugit debitis eius.</p>
    </div>
  </div>
</div>

Читав що таке буває через скроли. Може хтось стикався і знає як виправити?

якщо сторінка зсуваєтся по горизонталі, то через те що у вікна бравзера додається декілька пікселів для скрол бара

для вирішення цього, коли показується діалог роблять ось так

body {
    overflow:hidden;
}

або додають клас до body, який зробить те ж саме

ось тут пишуть як приховати скроли по окремості

Подякували: ostap34PHP, 221VOLT, navchalkin, Monolith4

3

Re: зсувається сторінка після модального вікна

mike написав:

якщо сторінка зсуваєтся по горизонталі, то через те що у вікна бравзера додається декілька пікселів для скрол бара

для вирішення цього, коли показується діалог роблять ось так

body {
    overflow:hidden;
}

або додають клас до body, який зробить те ж саме

ось тут пишуть як приховати скроли по окремості

А не підкажете як зробити це коли відкривається модаль?

4 Востаннє редагувалося mike (30.01.2017 20:21:10)

Re: зсувається сторінка після модального вікна

navchalkin написав:
mike написав:

якщо сторінка зсуваєтся по горизонталі, то через те що у вікна бравзера додається декілька пікселів для скрол бара

для вирішення цього, коли показується діалог роблять ось так

body {
    overflow:hidden;
}

або додають клас до body, який зробить те ж саме

ось тут пишуть як приховати скроли по окремості

А не підкажете як зробити це коли відкривається модаль?

накраще всього добавити хендлер, який відповідає за show/close цього діалога http://stackoverflow.com/questions/1219 … show-event

і в самому хендлері додавати/забирати клас із body

Подякували: 221VOLT, navchalkin2

5

Re: зсувається сторінка після модального вікна

ще одне із css рішень, то це показувати скролбар завжди, тоді ніяких хендлерів не потрібно, але тут питання в іншому, чи доцільно буде коли скролбар завжди показуватиметься

body {
  overflow-y: scroll;
}
Подякували: 221VOLT, navchalkin2

6

Re: зсувається сторінка після модального вікна

mike, дуже вдячний! Допомогло!