JSFiddle - React, Tailwind, and code Playground

by zlojnaxa

HTML

<div id="modal">
	<div id="modalIn">Модальное окно которое сколлится</div>
</div>
<input type="button" value="Открыть модалку" id="but">

CSS

html, body{margin: 0px 0px 0px 0px; width:  100%;}
body{
    height: 5000px;
}
#modal{
    width:  100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    position:  fixed;
    z-index:  1;
    display:  none;
    color: #00acff;
    font-size:  50px;
    text-align:  center;
    overflow-y: scroll;
    cursor:  pointer;
}
#but{
    position:  absolute;
    margin-top: 60px;
}

#modalIn{
	width: 400px;
	height: 6000px;
	background:  #fff;
	margin: 0px auto;
	cursor: auto;
}

JavaScript

let body = document.getElementsByTagName('body')[0], modal = document.getElementById('modal');
document.getElementById('but').addEventListener('click',()=> {
    modal.style.display = 'block';
    body.style.overflowY = 'hidden';
 
});
modal.addEventListener('click',(e)=> {
    if(e.target.id == 'modal'){
    	modal.style.display = 'none';
    	body.style.overflowY = 'scroll';
    }
});