JSFiddle - React, Tailwind, and code Playground

by rahbari

HTML

<div id="dialog" class="gone">
    <!-- dialog content -->
    <div style="margin: 100px; height:1000px; background:#fff">
        <a onclick="closeDialog()">Close Dialog (look how scrollbar changes)</a>
    </div>
</div>

<div style="height:4000px">
    <a onclick="showDialog()">Show Dialog (look how scrollbar changes)</a>
</div>

CSS

.gone {display:none}
.no-scroll {overflow:hidden}
#dialog {overflow-y:scroll; height:100%; width:100%; position:fixed; top:0; left:0; background:rgba(0,0,0,0.9)}

JavaScript

function showDialog()
{
    $('dialog').removeClass('gone');  
    document.body.addClass('no-scroll');
}

function closeDialog()
{
    $('dialog').addClass('gone');  
    document.body.removeClass('no-scroll');
}