Bootstrap 3 Модальное окно с Affix?

Im пытается создать модальное окно с бутстрапом 3, которое будет работать как «ImageViewer», где пользователь может прокручивать большие изображения по вертикали.Bootstrap 3 Модальное окно с Affix?

С левой стороны этого ImageViewer, я хотел бы иметь маленькие эскизы изображений, прикрепленных, чтобы пользователь всегда мог быстро перепрыгивать между изображениями в галерее. Я попытался сделать это на простой странице html, и все работает отлично, но как только я помещаю тот же HTML-код в модальное окно, аффикс перестает работать.

<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a> 

<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       <div class="container"> 
        <div class="row"> 
         <div class="col-md-3"> 
          <!-- This div container should be affixed when scrolling the images --> 
          <div class="sidebar affix"> 
           <a href="#img1"> 
            <img src="//placehold.it/50x50/2255EE/EEE&text=1" alt="" /></a> 
           <a href="#img2"> 
            <img src="//placehold.it/50x50/2255EE/EEE&text=2" alt="" /></a> 
           <a href="#img3"> 
            <img src="//placehold.it/50x50/2255EE/EEE&text=3" alt="" /></a> 

          </div> 
         </div> 

         <div class="col-md-9" role="main"> 
          <img id="img1" src="//placehold.it/600x450/2255EE/EEE&text=1" class="img-responsive" style="margin: 5px" alt="" /> 
          <img id="img2" src="//placehold.it/600x450/2255EE/EEE&text=2" class="img-responsive" style="margin: 5px" alt="" /> 
          <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" /> 
          <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" /> 
          <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" /> 
          <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" /> 
          <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" /> 
          <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" /> 
          <img id="img3" src="//placehold.it/600x450/2255EE/EEE&text=3" class="img-responsive" style="margin: 5px" alt="" /> 

         </div> 
        </div> 

       </div> 
      </div> 

     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div>

Я создал скрипку здесь: http://jsfiddle.net/R8D2v/

Может кто-нибудь помочь?

С наилучшими пожеланиями Никлас

источник

2013-09-19 Niclas Rothman

Вы можете установить определенную высоту на области, которую вы хотите быть прокручивать:

.row{ 
     height: 600px; 
     } 
    .col-md-9{ 
     height:600px; 
     overflow-y:scroll;  
    }

И скрипку: http://jsfiddle.net/R8D2v/1/

источник

2013-09-19 18:16:01 kenttam

Привет, Kenttam и спасибо за ваш ответ, наиболее ценим! Я попытался добавить css, как вы предложили, и уверен, что он исправляет мою проблему, когда аффикс не работает. Однако теперь у меня новая проблема. Если набор явной высоты как 600 пикселей, как в вашем примере, а окно браузера пользователей меньше, чем эта жестко запрограммированная высота, все это выглядит странно. Изображения выходят за рамки модального окна. Я думаю, мне нужно некоторое soloution работать со 100% высоты. Сыграли с ним, но могут получить то, что либо работаю ... :-) –

Попробуйте добавить некоторый стиль для модального ,

style="position:absolute;overflow:hidden"

Demo

источник

2013-09-19 18:22:17 devo

Пробовал это, но я не уверен, что я заголовок. Можете ли вы перехапнуть изменить мою скрипку? Спасибо Niclas –

Проверить здесь http://jsfiddle.net/R8D2v/3/ – devo

Вы не добавить класс проставлять вручную. Функция аффикса работает, переключая классы .affix, .affix-top и .affix-bottom, когда вы выполняете параметры 'data-offset-top' или 'data-offset-bottom'.

Вручную присвоение класса аффикса функционально фиксирует позицию, зафиксированную на элементе, поэтому, когда не используется модальное значение, оно не перемещается. Конечно, он будет/никогда/двигаться, потому что нет логики для его позиционирования.

Соответствующий синтаксис аффикса можно найти на bootstrap site.

<div data-spy="affix" data-offset-top="200">...</div>

К сожалению, при прокрутке это не документ, а скорее модальность переполнения. Мое предположение - аффикс-мониторы первого. Я создал некоторый jquery, который имитирует поведение в этом edited fiddle. При проверке страницы вы можете увидеть, что класс .affix добавлен в .sidebar, когда вы прокручиваете точку, определенную в jquery. Я оставляю это для правильного расположения элемента (позиция использования: исправлена).

$('.modal').on('scroll', function(){ 
    var someThreshold = 60; 

    if ($('.modal').scrollTop() > someThreshold) { 
     $('.modal .sidebar').addClass('affix'); 
    } 
    else { 
     $('.modal .sidebar').removeClass('affix'); 
    } 
});

На стороне записки: При размещении скрипки убедитесь, что вы используете «Col-xs- *», как с помощью «Col-MD- *» приводит элементы к коллапсу в одну колонку в неизбежно узком " результатов ".

источник

2013-09-28 17:59:48

Это переключается в фиксированное положение, но при прокрутке оно по-прежнему отключается. – Brendan

Bootstrap 3 Модальное окно с Affix?

ответ

Смежные вопросы