Jump to content
  • 0

Модальное окно блокирует прокрутку

WhatIsHTML

Asked by WhatIsHTML,

 Share

Question

WhatIsHTML Explorer

WhatIsHTML

Posted
Posted

При вызове модального окна, прокрутка на странице блокируется и элементы немного смещаются в сторону (наверное из-за того, что прокрутка исчезает). Мне надо, чтобы скроллинг на основной странице работал, но в стилях не могу разобраться уже час как. Может у кого-то была такая проблема? Пример простой страницы с модальным окном.

 

До

После

На песочнице не получается подключить файлы бутстрапа, поэтому выложу архив с страницей приведенной на скриншоте.

https://yadi.sk/d/CPBzvMDjnyRgd

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
WhatIsHTML Explorer

WhatIsHTML

Posted
  • Author
Posted

Решил проблему добавлением селектора

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

При появлении модального окна, тегу body добавляется padding справа в 17px (ширина прокрутки).

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing

  • Similar Content

    • Marri.nich
      Container в Bootstrap
      By Marri.nich
      Всем привет) Самостоятельно обучаюсь верстке. Сейчас изучаю Bootstrap и столкнулась с такой проблемой: 
      <header>         <nav>             <div class="container">                 <ul class="menu">                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                     ...                     <li class="menu-item"><a href="#" class="menu-link">Пункт меню</a></li>                 </ul>             </div>         </nav> </header> Использую в верстке стандартный контейнер из Bootstrap'а. Его стили не трогаю.
      Сейчас корплю над адаптивностью сайта и при изменении размера устройства (в консоли разработчика) на 768px шапка вылезает за пределы экрана.
      Как удалось выяснить header принимает требуемое значение width: 768px, а вот nav упорно занимает 993px и они тянутся от container'а (он согласно стилям Bootstrap'а имеет max-width: 720px, но его margin-left и margin-right почему-то принимают значение 136,50px. 
      Дополнение: тегу nav в стилях задан width: 100%.
      Вопрос:
      1. Правильно ли я понимаю, что cтандартный контейнер из Bootstrap'а должен был в данном примере рассчитаться так: width=max-width=720px, margin-left=margin-right=(768px-720px-12pxpadding-left-12pxpadding-right)/2=12px?
      2. Почему margin'ы работают не так как я ожидаю?)
      Если я что-то неясно или не совсем корректно изложила прошу понять и простить :)))
      Спасибо за ответы.
       
    • Elizavetk_a
      Совет по реализации
      By Elizavetk_a
      Здравствуйте!
      Возникла проблема с реализацией одной идеи.
      Есть интерактивный объект с возможностью прокрутки городов. И есть фотографии, сделанные в виде  cards bootstrap 4. Необходимо, чтобы при выборе города выделялись определенные фотографии. Можете подсказать, как можно это реализовать в верстке, какие материалы изучить?
      Схематический рисунок прикреплен ниже. 
      Заранее спасибо)

    • Adrian_v1
      Модальные всплывающие окна
      By Adrian_v1
      Всем привет. Новичок, месяц назад понятия не имел о чем речь. За месяц cверстал сайт, с помощью видео уроков и форумов. 

      Есть две проблемы. 
      1. Хочу добавить всплывающие окошко. На CSS и HTML, без JS. (Скрин №1). Не хватает смекалки, как его сделать по вызову кнопки. Кнопка "#24/7/365". 
      2. Какие свойства посоветуете задать для видео фона, что бы он был во все окно браузера. Если заходить с сафари, проблем нет. Но если с хрома, справа торчит полоска. (Скрин №2)
      Критику воспринимаю адекватно, любые советы приветствуются. Отблагодарю советами по тренировкам по плаванию, так как являюсь тренером.
       
      Сайт - http://demolishingswim.club
       


    • VolKTieR
      Появляющаяся кнопка включения/выключения аудио при скроллинге
      By VolKTieR
      Здравствуйте.
      Имеется данный код:
      <audio id="audio">     <source src="audio/1.mp3" type="audio/mpeg"> </audio> <div class="fixedbut" id="sebut">Звук</div> <style> div.fixedbut { position: fixed;     bottom: 93%;     right: 20px;      display: block;      background: white;      border-radius: 10px;     color: black;      text-decoration: none;      padding: 6px 23px;     font-size: 17px ;     -webkit-transition: 0.33s all ease-out;      -o-transition: 0.33s all ease-out;      transition: 0.33s all ease-out;     z-index: 999; } div.fixedbut:hover {         background: grey;         color: white; } </style> <script> document.getElementById("sebut").onclick = function()     {       var myaudio = document.getElementById("audio");       if(myaudio.paused == true)       {         document.getElementById("audio").play();  }       else if (myaudio.paused == false)       {         document.getElementById("audio").pause(); }     } </script> <script>     $(document).ready(function(){       $(window).scroll(function () {         if ($(this).scrollTop() > 200)          {             $('div.fixedbut').fadeIn();        }         else          {             $('div.fixedbut').fadeOut();         }   })     }); </script>
       
      Кнопка плавающая, останавливает звук включенный другой .
      Со звуком проблем нет, но появление и исчезание кнопки при прокрутке не работает.
      Подскажите пожалуйста как сделать))
    • kask
      navbar collapse
      By kask
      Подскажите какие стили нужно переопределить чтобы навигационная панель в navbar выезжала слева на право а не сверху вниз как определенно стандартно 
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept