Modal No Page Scrolling 2.1.2

Resolves Modal-triggered page scrolling by reordering focus call. Issue 5336: https://github.com/twitter/bootstrap/issues/5336

by mmfansler

HTML

<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script src="https://github.com/twitter/bootstrap/raw/v2.2.0/js/bootstrap-modal.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...

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;
});