Modal Prevent Page Scrolling

Demos using mouse events to prevent scrolling while a modal is open. SO: http://stackoverflow.com/q/9538868/570918

by mmfansler

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="container">
    <div class="hero-unit">
    <h2>scroll down for some buttons</h2>
    </div>
<!-- Jibberish -->
<div class="row">
<div class="highNtight">
    <p>Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis.</p>

<p>Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.</p>
</div>
</div>
<div class="row">
<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn btn-info" data-toggle="modal">Modal via Data API</a>
</div>

<!-- Another button to trigger modal -->
<div class="row">
    <a id="jsMe" href="#myModal" role="button" class="btn btn-warning">Modal via JS API</a>
</div>

<!-- begin more jibberish -->
<div class="row">
<div class="highNtight">
    <p>Mustache minim mcsweeney's high life gentrify id, exercitation laboris fanny pack assumenda tattooed. 8-bit id sed nesciunt, elit DIY aliquip mlkshk mcsweeney's cred consequat. Pork belly ennui art party, photo booth sed mumblecore organic 8-bit brunch. Lomo cillum gastropub cardigan eu squid, pork belly yr non duis nulla...

CSS

.highNtight {
    width: 200px;
}

.row {
    margin-left: 20px;
}

.row + .row {
    padding-top: 20px;
}

.container {
    width: 100%;
}

JavaScript

$('#jsMe').on('click', function() {
    $('#myModal').modal('toggle');
    return false;
});

$('#myModal').on('shown', function () {
    $('body').on('wheel.modal mousewheel.modal', function () {return false;});
}).on('hidden', function () {
    $('body').off('wheel.modal mousewheel.modal');
});