right4   right2
Караганда-НМ.KZ
Форум Регистрация Фотоальбомы 3D тур Правила Календарь Все форумы прочитаны
left1 left2

Вернуться   Караганда-НМ.KZ > Информационные технологии > Web-Mастерская

Важная информация

KNM
Ответ
 
Опции темы
Старый 15.05.2018, 08:25   #1
Ale)(
Местный
Аватар для Ale)(
Мальчик 35644 Возраст: 29
Flag 35644
Город: Караганда
Ale)( там
 
Регистрация: 16.01.2013
Сообщений: 3,660
Репутация: 3608916
Вес репутации: 36098
Проблема с модальным окном

Надежды мало, но вдруг кто-то тут сталкивался с подобным.
Ситуация такая. На странице производится вызов модального окна. Проблема заключается в том, что в полноэкранном размере модальное окно не прокручивается ни колесиком мыши, ни стрелками. Прокручивается только если за скролбар потянуть курсором.
Если окно браузера уменьшить в размерах, прокрутка колесиком начинает работать. (Начинает работать если страница становиться width меньше 999px)
Кучу всего уже перепробовал, голова уже не соображает.

Код:
<a href="#myModal1" data-toggle="modal" style="color:white">Ссылка на модальное окно</a><br>
 
<!--Модальное окна 1-->
<div id="myModal1" class="modal fade" align="center">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">Г—</button>
        <h4 class="modal-title" style="color: black">Заголовок</h4>
      </div>
    <div class="modal-body">
   Содержимое модального окна, больше размеров окна.
      </div>
      <!-- Футер модального окна -->
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>
Код:
.modal-open{overflow:hidden}
 
.modal{height:auto;position:absolute;top:50px;right:0;bottom:0;left:0;z-index:10050;display:none;overflow-y:auto;-webkit-overflow-scrolling:touch;outline:0}
 
body.modal-open {    overflow: hidden; position:fixed;    width: 100%;}
 
.modal.fade .modal-dialog{-webkit-transition:-webkit-transform .3s ease-out;-o-transition:-o-transform .3s ease-out;transition:transform .3s ease-out;-webkit-transform:translate(0,-25%);-ms-transform:translate(0,-25%);-o-transform:translate(0,-25%);transform:translate(0,-25%)}
 
.modal.in .modal-dialog{-webkit-transform:translate(0,0);-ms-transform:translate(0,0);-o-transform:translate(0,0);transform:translate(0,0)}
 
.modal-open .modal{overflow-x:hidden;overflow-y:auto}
 
.modal-dialog{position:relative;width:auto;margin:10px}
 
.modal-content{height:450px;position:relative;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #999;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;-webkit-box-shadow:0 3px 9px rgba(0,0,0,.5);box-shadow:0 3px 9px rgba(0,0,0,.5);overflow:auto}
 
.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}
 
.modal-backdrop.fade{filter:alpha(opacity=0);opacity:0.5}
 
.modal-backdrop.in{filter:alpha(opacity=0);opacity:.5}
 
.modal-header{padding:15px;border-bottom:1px solid #e5e5e5}
 
.modal-header .close{margin-top:-2px}
 
.modal-title{margin:0;line-height:1.42857143}
 
.modal-body{position:relative;padding:15px}
 
.modal-footer{padding:15px;text-align:right;border-top:1px solid #e5e5e5}
 
.modal-footer .btn+.btn{margin-bottom:0;margin-left:5px}
 
.modal-footer .btn-group .btn+.btn{margin-left:-1px}
 
.modal-footer .btn-block+.btn-block{margin-left:0}
 
.modal-scrollbar-measure{position:absolute;top:-9999px;width:50px;height:50px;overflow:scroll}@media (min-width:768px){.modal-dialog{width:600px;margin:30px auto}.modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5)}.modal-sm{width:300px}}@media (min-width:992px){.modal-lg{width:900px}}
__________________
Сегодня людей благодарят за то, что они поступают как люди.
 
Ответить с цитированием
Сегодня
Местный
Реклама

__________________

...
Старый 16.05.2018, 10:36   #2
Lano4ka
Ъ
Девочка 49178
Flag 49178
Lano4ka там
 
Регистрация: 24.11.2015
Сообщений: 1,648
Репутация: 4919532
Вес репутации: 49199
Re: Проблема с модальным окном

я очень извиняюсь, но зачем верстать самому модалку, когда есть bootstrap?
__________________
Убивай космонавтов, они лезут на небо!
 
Ответить с цитированием
Старый 16.05.2018, 11:18   #3
Ale)(
Местный
Аватар для Ale)(
Мальчик 35644 Возраст: 29
Flag 35644
Город: Караганда
Ale)( там
 
Регистрация: 16.01.2013
Сообщений: 3,660
Репутация: 3608916
Вес репутации: 36098
Re: Проблема с модальным окном

Lano4ka, это и есть bootstrap. только вот проблема остается.
__________________
Сегодня людей благодарят за то, что они поступают как люди.
 
Ответить с цитированием
Ответ

Опции темы

Ваши права в форуме
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Форум Ответов Последнее сообщение
Это проблема? Gedeon Мужской клуб 97 18.04.2016 11:20
проблема Антон t990vdm Тех. обслуживание 5 01.03.2013 20:19
Проблема с DVD-ROM SteelCity Железо 6 13.02.2012 08:27
проблема с СМС sergey1971 Сотовая связь 1 19.10.2011 12:18
Погода за окном Жорик Флейм 39 03.01.2011 19:01


Текущее время: 11:47. Часовой пояс GMT +6.


Powered by vBulletin® Version 3.8.4
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd. Перевод: zCarot
Время генерации страницы 0.04784 секунды с 12 запросами