As additional to @Karthick Kumar answer from bootstrap docs
show is triggered at the start of an event
shown is triggered on the completion of an action
... so it should be:
$('.modal')
.on('show.bs.modal', function (){
$('body').css('overflow', 'hidden');
})
.on('hide.bs.modal', function (){
// Also if you are using multiple modals (cascade) - additional check
if ($('.modal.in').length == 1) {
$('body').css('overflow', 'auto');
}
});