Почему элемент не скролится html css
Есть модальное окно, в открытом состоянии почему о вся страница скролится, а само окно не скролится, мне это очень нужно так как вся форма не помещается в мобилку.
$(document).ready(function() {
$('.open_order').click(function () {
$('#openModal_order').show();
}
)
});
$(document).ready(function() {
$('.close').click(function () {
$('.modal').hide();
}
)
});
$(document).ready(function() {
$('.close_f').click(function () {
$('.modal_f').hide();
}
)
});.modal_f {
position: fixed;
display: none;
/* фиксированное положение */
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.5);
/* цвет фона */
z-index: 1050;
/*opacity: 0;*/
/* по умолчанию модальное окно прозрачно */
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
/* анимация перехода */
pointer-events: none;
/* элемент невидим для событий мыши */
}
/* при отображении модального окно */
.modal_f:target {
/*opacity: 1;*/
pointer-events: auto;
overflow-y: auto;
}
/* ширина модального окна и его отступы от экрана */
.modal-dialog {
position: relative;
width: auto;
margin: 10px;
}
@media (min-width: 576px) {
.modal-dialog {
max-width: 500px;
margin: 30px auto;
}
}
/* свойства для блока, содержащего контент модального окна */
.modal-content {
position: relative;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
background: rgba(5, 4, 8, 0.7);
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, .2);
border-radius: .3rem;
outline: 0;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
<div class="banner-area bg_cover d-flex align-items-center" style="background-image:
<div class="container">
<div class="row justify-content-center">
<div class="col-lg-10">
<div class="banner-content text-center">
<span data-animation="fadeInDown" data-delay="1s">Доставка</span>
<h3 data-animation="fadeInDown" data-delay=".1s" class="title">Бережная доставка</h3>
<a data-animation="fadeInUp" data-delay="1s" class="main-btn open_order" href="javascript:void(0);">Оформить заказ</a>
</div>
</div>
</div>
</div>
</div>
<section class="solution-area pb-120">
<div class="container">
<div class="row">
<div class="col-lg-5">
<div class="solution-thumb animated wow fadeInLeft" data-wow-duration="1500ms" data-wow-delay="0ms">
<img src="assets/images/solution-thumb.jpg" alt="">
<div class="shape">
<img src="assets/images/shape/shape-1.png" alt="">
</div>
</div>
</div>
<div class="col-lg-7">
<div class="solution-item">
<div class="solution-header">
<span>Преимущества наших профессионалов</span>
</div>
<div class="row">
<div class="col-lg-8 col-md-7">
<div class="solution-list-content">
<p>Московская Зеркальная Фабрика
доверяет перевозку и монтаж
зеркальной и стекольной продукции
профессионалам</p>
<ul>
<li><i class="flaticon-tick"></i>Страховка изделий на время транспортировки.</li>
<li><i class="flaticon-tick"></i>Проверка качества на складе изготовителя.</li>
<li><i class="flaticon-tick"></i>Специализированная упаковка продукции.</li>
<li><i class="flaticon-tick"></i>Страховка включена в стоимость доставки.</li>
<li><i class="flaticon-tick"></i>Прием товара без присутствия клиента на складе.</li>
<li><i class="flaticon-tick"></i>Автомобили оборудованы спец. крепежной системой.</li>
<li><i class="flaticon-tick"></i>Круглосуточная доставка 7 дней в неделю.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="solution-shape animated wow fadeInRight" data-wow-duration="1500ms" data-wow-delay="0ms">
<img src="assets/images/shape/shape-13.png" alt="">
</div>
</section>
<section class="services-area">
<div class="container">
<div class="services-bg">
<div class="row">
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="services-item mt-70">
<img src="assets/images/services-1.jpg" alt="services">
<div class="icon">
<i class="flaticon-under-construction"></i>
</div>
<div class="services-overlay">
<h4 class="title">Замер</h4>
<p>Наши специалисты помогут вам сделать точный замер</p>
<a href="[[~11]]">Подробнее</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="services-item mt-70">
<img src="assets/images/services-2.jpg" alt="services">
<div class="icon">
<i class="fa fa-car"></i>
</div>
<div class="services-overlay">
<h4 class="title">Доставка</h4>
<p>Доставка осуществляется круглосуточно 7 дней...</p>
<a href="[[~8]]">Подробнее</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="services-item mt-70">
<img src="assets/images/services-3.jpg" alt="services">
<div class="icon">
<i class="flaticon-layout"></i>
</div>
<div class="services-overlay">
<h4 class="title">Монтаж</h4>
<p>Осуществление монтажных работ квалифицированными...</p>
<a href="[[~10]]">Подробнее</a>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6 col-sm-6">
<div class="services-item mt-70">
<img src="assets/images/services-4.jpg" alt="services">
<div class="icon">
<i class="flaticon-under-construction-1"></i>
</div>
<div class="services-overlay">
<h4 class="title">Напишите нам</h4>
<p>Если у вас есть вопросы, пожалуйста напишите нам</p>
<a href="[[~3]]">Написать</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="services-shape">
<img src="assets/images/shape/shape-7.png" alt="">
</div>
</section>
<div class="col-lg-12">
<div id="openModal_order" class="modal_f col-lg-12">
<div class="modal-dialog col-lg-12">
<div class="modal-content modal-header col-lg-12">
<a id="close" href="javascript:void(0);" title="Close_form" class="close_f">×</a>
<div class="col-lg-12">
<div class="comment-form">
<div class="comment-form">
<form action="" method="post" enctype="multipart/form-data" class="contact-one__form form_contact"> <!---->
<div class="row">
<div class="col-lg-6">
<div class="input-box has-feedback nameBlock">
<label for="name" class="control-label ">Имя*</label>
<input required type="text" placeholder="Иван Иванов" name="name" value="" class="name" >
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="email" class="control-label" >Email-адрес*</label>
<input required type="email" placeholder="Email" name="email" value="" class="email_home_form">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box _req">
<label for="tel" class="control-label">Номер телефона*</label>
<input required type="tel" placeholder="+79997772255" name="tel" value="" class="tel">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="number_order" class="control-label">№ СДЕЛКИ*</label>
<input required type="text" placeholder="0000000-я00" name="number_order" value="" class="number_order">
</div>
</div><!-- /.col-lg-6 -->
<div class="col-lg-6">
<div class="input-box">
<label for="message" class="control-label">Тип обращения*</label>
<select class="type_appeal" name="type_appeal">
<option value="appeal: delivery">Оформить доставку</option>
<option value="appeal: date">Выбрать желаемую дату</option>
</select>
</div>
</div>
<div class="col-lg-12">
<div class="input-box"></div>
<div class="checkbox">
<input checked id="checkbox_check" type="checkbox" name="agreement" class="checkbox__input checkbox_check">
<label for="checkbox_check" class="checkbox__label _error"><span>Я даю согласие на обработку персональных данных в соответствии с <a href="">Условиями</a>*</span></label>
</div>
</div>
</div>
<div class="col-lg-12 text-left">
<br>
<button class="main-btn sendMail"> Отправить </button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>