Bootstrap 3 modal window with affix?

Question

I am trying to create a modal window with bootstrap 3, which will work as an "ImageViewer", where the user can scroll large images vertically.

On the left side of this ImageViewer, I would like to have small thumbnails of the attached images so that the user can always quickly jump between images in the gallery. I tried to do this on a simple html page and everything works fine, but as soon as I put the same HTML in a modal window, the affix stops working.

<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> 

I created a fiddle here: http://jsfiddle.net/R8D2v/

Can anyone help?

Best regards Niklas

Answer 1

You can set a specific height in the area you want to scroll:

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

And the fiddle: http://jsfiddle.net/R8D2v/1/

Answer 2

You do not add the class affix manually. The affix function works by switching the .affix, .affix-top and .affix-bottom classes when you execute the parameters 'data-offset-top' or 'data-offset-bottom'.

Manually assigning an affix class functionally sets the element to a fixed position, so when it does not use the modal, it does not move. Of course, he will / never / move, because there is no logic for his positioning.

The corresponding affix syntax can be found on the boot site .

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

Unfortunately, when you scroll, this is not a document, but rather an overflow modality. My guess is affix monitors first. I created some jquery that mimics the behavior in this edited fiddle . While checking the page, you can see that the .affix class is added to the .sidebar when you scroll the point defined in jquery. I leave this for the correct position of the element (usage position: fixed).

 $('.modal').on('scroll', function(){ var someThreshold = 60; if ($('.modal').scrollTop() > someThreshold) { $('.modal .sidebar').addClass('affix'); } else { $('.modal .sidebar').removeClass('affix'); } }); 

On the side of the note: when publishing the script, make sure that you use "col-xs- *", since using "col-md- *" forces the items to collapse into a single column in the inevitably narrow "results" area.

Answer 3

Try adding a style to the modal.

 style="position:absolute;overflow:hidden" 

Demo