JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/black-tie/jquery-ui.css">
<div id="main">
    <button id="opener" type="button">Abrir o dialog</button>
</div>
<div id="wrapper">
    <p>Olá :)</p>
</div>

CSS

#main {
    height: 3000px;
}
#opener {
    position: fixed;
}

JavaScript

var dialog = $('#wrapper').dialog({
    autoOpen: false,
    resizable: false,
    title: 'Caixa de info'
});
$('#opener').click(function () {
    $('#wrapper').dialog('open');
    dialogPosition = $('.ui-dialog').offset().top;
    dialogHeight = $('.ui-dialog').outerHeight();
    ultimoScroll = $(window).scrollTop();
});


var dialog, dialogPosition, dialogHeight, ultimoScroll;
$(window).on('scroll', function () {
    var scroll = $(this).scrollTop();
    var foraDoLimite = scroll > dialogPosition + dialogHeight || scroll < dialogPosition;
    if (dialog.dialog( "isOpen" ) && foraDoLimite) $(window).scrollTop(ultimoScroll);
    else ultimoScroll = scroll;
});