Как убрать scroll c body при открытии модального окна
Делаю проект, само модальное окно есть, но ни как адекватно не могу прокрутку убрать, я находил решение в интернете, но под мой проект ничего не подходит, я сам новичок, и в js разбираюсь плохо.
HTML
<a class="realtyFace modalOpen" href="">
<div class="modalFade">
<div class="modal">
<a class="modalClose" href="#">
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="30px" height="30px" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M161 5103 c-88 -31 -161 -136 -161 -233 0 -20 7 -59 16 -86 15 -45 106 -139 1103 -1137 l1086 -1087 -1082 -1083 c-594 -595 -1089 -1097 -1098 -1116 -45 -90 -24 -213 50 -286 69 -70 163 -91 261 -59 45 15 139 106 1136 1103 l1088 1086 1088 -1086 c997 -997 1091 -1088 1136 -1103 98 -32 192 -11 261 59 70 69 91 163 59 261 -15 45 -106 139 -1103 1137 l-1086 1087 1086 1088 c997 997 1088 1091 1103 1136 32 98 11 192 -59 261 -69 70 -163 91 -261 59 -45 -15 -139 -106 -1137 -1103 l-1087 -1086 -1088 1086 c-997 997 -1091 1088 -1136 1103 -61 20 -117 19 -175 -1z"/>
</g>
</svg>
</a>
<h1>Подобрать объект</h1><br>
<p>Раскажем о перспективных вариантах, подберем наиболее выгодные для вас позиции.</p>
<form>
<div class="modalForms">
<input type="text" id="name" class="formsGroup" placeholder="Ваше имя">
<svg class="peopleSvg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="20px" height="20px" viewBox="0 0 512.000000 512.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,512.000000) scale(0.100000,-0.100000)" fill="#000000BE" stroke="none">
<path d="M2260 4835 c-501 -70 -965 -300 -1320 -655 -357 -356 -590 -829 -654 -1328 -18 -142 -21 -398 -5 -540 93 -858 658 -1585 1474 -1899 109 -41 315 -97 445 -118 207 -35 564 -30 780 11 932 178 1656 902 1834 1836 41 213 46 572 11 778 -80 477 -303 916 -634 1250 -349 351 -774 570 -1271 656 -135 23 -520 28 -660 9z m562 -320 c357 -49 699 -197 978 -422 89 -72 257 -243 321 -328 284 -372 420 -797 406 -1270 -9 -292 -63 -521 -187 -782 -292 -615 -879 -1033 -1564 -1114 -123 -14 -431 -6 -541 14 -192 36 -357 89 -523 168 -614 291 -1032 878 -1113 1563 -15 126 -6 431 15 546 78 415 266 780 551 1065 305 304 721 508 1151 564 116 14 384 12 506 -4z"/>
<path d="M2455 3779 c-323 -49 -577 -272 -667 -585 -29 -103 -32 -304 -4 -404 38 -140 132 -298 226 -384 l40 -36 -63 -41 c-86 -59 -215 -190 -272 -277 -101 -158 -154 -316 -162 -492 -5 -109 -4 -117 18 -150 13 -19 45 -46 71 -58 63 -31 115 -24 169 25 43 39 59 82 59 159 0 71 32 189 74 272 88 174 253 307 444 356 80 21 264 21 346 0 138 -35 289 -134 372 -245 85 -112 144 -270 144 -383 0 -77 16 -120 59 -159 54 -49 106 -56 169 -25 72 35 92 74 92 172 -1 319 -182 637 -470 827 l-25 16 57 62 c101 109 167 224 204 361 28 100 25 300 -4 404 -64 223 -215 406 -419 509 -124 63 -325 97 -458 76z m259 -341 c234 -78 371 -328 311 -563 -58 -222 -240 -365 -465 -365 -414 0 -632 490 -355 798 129 143 323 193 509 130z"/></g>
</svg>
<label for="name">name</label>
<input type="text" id="phone" class="formsGroup" placeholder="Номер телефона">
<svg class="phoneSvg" xmlns="http://www.w3.org/2000/svg" version="1.0" width="20px" height="20px" viewBox="0 0 24.000000 24.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,24.000000) scale(0.100000,-0.100000)" fill="#000000BE" stroke="none">
<path d="M55 227 c-3 -7 -4 -60 -3 -118 l3 -104 65 0 65 0 0 115 0 115 -63 3 c-45 2 -64 -1 -67 -11z m125 -107 l0 -110 -60 0 -60 0 0 110 0 110 60 0 60 0 0 -110z"/>
<path d="M108 23 c6 -2 18 -2 25 0 6 3 1 5 -13 5 -14 0 -19 -2 -12 -5z"/></g>
</svg>
<label for="phone">tel</label>
</div>
<div class="modalBtnCheck">
<a class="btn btnModal" href="" >Отправить</a>
<label class="chekboxModalRealty"><input type="checkbox" class="checkBoxGroup"><span class="txtCheck">Принимаю <a>условия обработки</a> персональных данных</span></label>
</div>
</form>
</div>
</div>
CSS
.modalFade{
display: none;
}
.modalFade::before {
content: '';
background: #000;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
opacity: 0.7;
z-index: 9999;
}
.modal{
position: fixed;
top: 30%;
bottom: 30%;
left: 30%;
right: 30%;
width: 450px;
height: 250px;
padding: 40px;
background: #fff;
z-index: 99999;
opacity: 1;
}
.modalClose{
position: absolute;
top: 10px;
right: 10px;
JS
$(document).ready(function($) {
$('.modalOpen').click(function() {
$('.modalFade').fadeIn();
return false;
});
$('.modalClose').click(function() {
$(this).parents('.modalFade').fadeOut();
return false;
});
$(document).keydown(function(e) {
if (e.keyCode === 27) {
e.stopPropagation();
$('.modalFade').fadeOut();
}
});
$('.modalFade').click(function(e) {
if ($(e.target).closest('.modal').length == 0) {
$(this).fadeOut();
}
});
});