How to blur the background when a modal is open

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<main class="main">
  <button class="btn btn-lg btn-primary" type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor ligula ligula. Phasellus convallis sed metus at lacinia. Donec rhoncus, arcu eget viverra feugiat, sem orci imperdiet tellus, et feugiat turpis sapien id ante. Cras gravida libero a erat interdum venenatis. Aliquam ullamcorper adipiscing mauris, eget placerat magna egestas non. Ut luctus laoreet hendrerit. In eu purus mi. Quisque laoreet aliquet augue, eget sagittis est. Aliquam sit amet tellus sit amet ligula cursus venenatis. Donec euismod non orci vel dignissim. In malesuada, est vitae faucibus hendrerit, ipsum augue tempus nisi, ac eleifend lectus mauris eu eros. In ac imperdiet purus. Praesent aliquet ipsum nec ante hendrerit placerat. Sed varius pellentesque quam eu viverra. Donec condimentum ligula eget turpis suscipit blandit.</p>

  <p>Praesent semper scelerisque venenatis. Aliquam in urna eu lectus accumsan blandit nec eget mi. Donec congue sem quis ante cursus, eget ornare augue ultricies. Maecenas vel varius diam. Donec leo turpis, egestas sit amet lobortis ac, lacinia sit amet ipsum. Sed non scelerisque nisl. Aenean feugiat, erat id aliquam laoreet, quam dui dignissim magna, quis porttitor nisl ipsum sed purus. Donec id metus at nisi fermentum dapibus vitae nec nisi. Donec feugiat pellentesque ligula in convallis. Etiam tellus diam, dapibus quis porta quis, congue sit amet velit. Nam sodales porttitor vestibulum. Vivamus sagittis diam quis est placerat, quis interdum lacus lacinia. Morbi aliquam augue a justo viverra porttitor. Curabitur tincidunt lorem sit amet ligula ultricies gravida. Donec at dui ac neque ultricies placerat sit amet at...

SCSS

.modal-is-open .main {
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    filter: blur(3px);
}

JavaScript

var modalStartLocation;

$(document).on('show.bs.modal', function(e) {
  var modal = $(e.target);
  modalStartLocation = modal.parent();
  console.log(modalStartLocation);
  modal.appendTo('body');
  
  $('body').addClass('modal-is-open');
});

$(document).on('hidden.bs.modal', function(e) {
  var modal = $(e.target);
  modal.appendTo(modalStartLocation);
  $('body').removeClass('modal-is-open');
});