Twitter Bootstrap 3 Modal with Scrollable Body

Just add:

.modal-content {
  height:250px;
  overflow:auto;
}

The height can of course be adapted to your personal needs.

Working Example

Update:

It's actually pretty easy. Just add:

.modal-body {
    max-height: calc(100vh - 212px);
    overflow-y: auto;
}

to your css.

It uses vh and calc, which also happen to have a good browser support (IE9+).

This is based on this answer. Please read there for more detailed information, I won't copy his answer.

Working Example

Bootstrap 3 modal with scrollable body

.modal-open {
  overflow: visible;
}

Bootstrap 3 modal creates scrollbar when opened

The problem occurred because Twitter Bootstrap always shift the page 15px to the left when a modal is opened. You can solve this by moving the page back to the right - margin-right: -15px. This can be done by using events show.bs.modal and hidden.bs.modal provided by Bootstrap's modal.

$('#myModal').bind('hidden.bs.modal', function () {
  $("html").css("margin-right", "0px");
});
$('#myModal').bind('show.bs.modal', function () {
  $("html").css("margin-right", "-15px");
});

jsFiddle

FYI:

show.bs.modal: This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

hidden.bs.modal: This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).

Reference

twitter bootstrap 3 modal on mobile scroll issues

FOR BOOTSTRAP 3

I found a fix for this issue that seems to be good enough for my site.

CSS:

body.modal-open > .wrap {
  overflow: hidden;
  height: 100%;
}

.modal-content, 
.modal-dialog, 
.modal-body { 
  height: inherit; 
  min-height: 100%; 
}

.modal { 
  min-height: 100%; 
}

HTML:

<body>
  <div class="wrap">All non-modal content</div>
  <div class="modal"></div>
</body>

So in the case that a modal is open, all non-modal content is limited to the height of the viewport and overflow is hidden, which prevents the main site from being scrolled, while the modal can still be scrolled.

EDIT: This fix has some issues in Firefox.

Fix for my site was (FF only media query):

@-moz-document url-prefix() {
  .modal-body { height: auto; min-height: 100%; }
  .modal { height: auto; min-height: 100%; }
  .modal-dialog {
    width: 100%;
    height: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
  }

  .modal-content {
    height: auto;
    min-height: 100%;
    border-radius: 0;
    border: 0px solid #000;
    margin: 0;
    padding: 0;
    top: 0;
    left: 0;
  }

}

Twitter Bootstrap 3 Modal Window OnScroll Event

So you need to fire something when the user scrolls the content inside the modal. then bind the scroll event to the modal content like this

$( ".modal-content" ).scroll(function() {
//fire event here
})

also set the height of the model content and set overflow:scroll that way the model becomes scrollable.

How to put scroll bar only for modal-body?

You have to set the height of the .modal-body in and give it overflow-y: auto. Also reset .modal-dialog overflow value to initial.

See the working sample:

http://www.bootply.com/T0yF2ZNTUd

.modal{
    display: block !important; /* I added this to see the modal, you don't need this */
}

/* Important part */
.modal-dialog{
    overflow-y: initial !important
}
.modal-body{
    height: 80vh;
    overflow-y: auto;
}

How make a Bootstrap modal with scrollable content and max height?

With pure CSS it's not possible, you can achieve the dynamic height of modal according to window size with following piece of script with suggested answer CSS in comments;

Script

$('#myModal').on('show.bs.modal', function () {
    $('pre').css('height',$( window ).height()*0.9);
});

CSS

.modal-body {
    overflow-y: auto;
}

Fiddle

Note: You have to adjust the height and may be the target class which you want to be with dynamic height, in example I target pre you can also try with $('.modal-body').css('height',$( window ).height()*0.9); which ever suits your need and according to design.

Or you can totally remove CSS suggested above and set the height in JS like as follow;

$('pre').css('height',$( window ).height()*0.6);

For Remote Modals

With remote modals above solutions will not work so with remote modals if you want to adjust the height of the selector e.g modal-body then following script and CSS can do the trick with bootstrap modal loaded event

$('#myModal').on('loaded.bs.modal', function () {
    $('pre').css('height',$( window ).height()*0.6); 
});

CSS

.modal-body {
    overflow-y: auto;
}

Bootstrap Modal events Functions

Scrolling body after dismissing bootstrap 3 modal

On your document ready function, check if there is a hash present in the URL, and if there is, scroll to that element:

$( document ).ready(function() {
    /* 
      Your actual code here
    */
    if(window.location.hash) {
          $('html, body').animate({
            scrollTop: $("#"+window.location.hash).offset().top
          }, 2000);
    }
});

Twitter Bootstrap 3 Modal with Scrollable Body