JSFiddle - React, Tailwind, and code Playground

HTML

<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>
<p>Notice how this text does not move when scrolling with the dialog open but does when the dialog is closed.</p>

CSS

</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.js"></script>
<script src="http://github.hubspot.com/vex/js/vex.dialog.js"></script>
<link href="http://github.hubspot.com/vex/css/vex.css" rel="stylesheet" />
<link href="http://github.hubspot.com/vex/css/vex-theme-default.css" rel="stylesheet" />
<style>
body > p {
    font-family: "Helvetica Neue", sans-serif;
    height: 500px
}
body.vex-open {
    overflow: hidden;
}

JavaScript

vex.defaultOptions.className = 'vex-theme-default';
vex.dialog
    .alert('This is a tall dialog.')
    .bind('vexOpen', function(){ $('body').addClass('vex-open'); })
    .bind('vexClose', function(){ $('body').removeClass('vex-open'); })
;