Задать вопрос
@lilici
javascript

Как сделать прокрутку модального окна вместе со страницей?

здравствуйте! есть модальное окно, вызываемое кнопкой, но на декстопах надо сделать его открытым по умолчанию, частью самой страницы слева. Пробовал через изменение display: hidden на block, но тогда оно не прокручивается вниз, при добавлении overflow: scroll прокручивается отдельно от всего сайта

html:
<div id="modal_menu">
  <div class="hamburger-menu">
    <div class="menu__box">
      <div class="menu__header">
        <span class="modal_menu__close menu__el-cancel hide-l"><img src="img/cancel.svg" class="menu__icon-cancel"></span>
        <img src="img/logo.svg" class="menu__icon-logo" alt="Photo" />
        <button aria-label="Site search" type="button"><span class="menu__el-loop"><img src="img/loop.svg" class="menu__icon-loop"></span></button>
      </div>
      <ul class="menu__box-list">
        <li><a href="#" aria-label="Go to the repair section" class="menu__item">Ремонт техники</a></li>
        <li><a href="#" aria-label="Go to the section about services and services" class="menu__item">Услуги и сервисы</a></li>
        <li><a href="#" aria-label="Information for corporate clients" class="menu__item">Корпоративным клиентам</a></li>
        <li><a href="#" aria-label="Information for sellers of equipment" class="menu__item">Продавцам техники</a></li>
        <li><a href="#" aria-label="Information for partners" class="menu__item">Партнерам</a></li>
        <li><a href="#" aria-label="Information for manufacturers" class="menu__item">Производителям</a></li>
        <li><a href="#" aria-label="Addresses of our service centers" class="menu__item">Наши сервисные центры</a></li>
        <li><a href="#" aria-label="Go to contacts" class="menu__item">Контакты</a></li>
      </ul>
      <div class="menu__footer">
        <div class="icons-menu__footer">
          <button aria-label="Go to chat" type="button"><span class="menu__el-sms"><img src="img/sms.svg" class="menu__icon-sms"></span></button>
          <button aria-label="Go to my profile" type="button"><span class="menu__el-profile"><img src="img/profile.svg" class="menu__icon-profile"></span></button>
      </div>
      <div class="contacts">
        <a href="mailto:mail@cps.com">mail@cps.com</a>
        <a href="tel:8800890890">8 800 890 890</a>
      </div>  
        <ul class="lng">
          <li><button aria-label="Change language to Russian" type="button">RU</button></li>
          <li><button aria-label="Change language to English" type="button">EN</button></li>
          <li><button aria-label="Change language to Chinese" type="button">CN</button></li>
        </ul>
      </div>
      </div>
  </div>
</div>


js: 
var modalMenu = document.getElementById("modal_menu");
var openMenu = document.getElementById("modal_menu__open");
var closeMenu = document.getElementsByClassName("modal_menu__close")[0];
openMenu.onclick = function() {
  modalMenu.style.display = "block";
}
closeMenu.onclick = function() {
  modalMenu.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modalMenu) {
    modalMenu.style.display = "none";
  }
}


css:
#modal_menu {
  position: fixed; 
  display: block;
  width: 320px; 
left: 0;
}
.hamburger-menu {
  width: 320px;
height: 100%;
  font-family: "TT Lakes";
  margin: 0;
  display: block;
  padding: 0;
}
.menu__header button {
  display: inline-block;
  border: 0;
  padding: 0;
  margin: 0;
  text-align: center;
  background-color: white;
  cursor: pointer;
}
.menu__box {
  list-style-type: none;
  display: flex;
  background-color: white;
  flex-direction: column;
  margin-top: -20px;
  padding: 0;
}
.menu__box a {
  text-decoration: none;
  font-size: 16px;
  margin-left: 24px;
  color: black;
  cursor: pointer;
  font-weight: 500;
}
.menu__box a:hover {
  color: #7e7e82;
  transition: all 500ms ease;
}
.menu__box a:hover::before {
  content: "";
  width: 1px;
  margin: 0;
  position: absolute;
  left: 0;
  height: 30px;
  background-color: #41f6d7;
  border-bottom-right-radius: 500%;
  border-top-right-radius: 500%;
  border: 2px solid #41f6d7;
}
.menu__btn:hover {
  cursor: pointer;
}
.menu__header {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-left: 24px;
  margin-top: 24px;
  width: 320px;
  gap: 16px;
}
.menu__icon-cancel {
  width: 16px;
  margin-top: 12px;
  height: 16px;
}
.menu__el-cancel {
  display: flex;
  justify-content: center;
  width: 40px;
margin-top: 24px;
  margin-right: 5px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.modal_menu__close:hover,
.modal_menu__close:focus {
  cursor: pointer;
}
.menu__icon-logo {
  width: 91px;
  margin-top: 18px;
  margin-right: 65px;
  height: 51px;
}
.menu__icon-loop {
  width: 17px;
  margin-top: 11px;
  height: 17px;
}
.menu__el-loop {
  display: flex;
  margin-top: 24px;
  justify-content: center;
  width: 40px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.menu__header button {
  cursor: pointer;
  background-color: white;
  border: 0;
}
.menu__box-list {
  display: flex;
  flex-direction: column;
  font-family: "TT Lakes";
  gap: 32px;
  margin-bottom: 268px;
  margin-top: 30px;
  padding: 0;
  list-style: none;
}
.menu__box-list a {
  text-decoration: none;
  font-size: 16px;
  margin-left: 24px;
  color: black;
  cursor: pointer;
  font-weight: bold;
}
.menu__box-list a:hover {
  color: #7e7e82;
  transition: all 500ms ease;
}
.menu__box-list a:hover::before {
  content: "";
  width: 1px;
  margin: 0;
  position: absolute;
  left: 0;
  height: 30px;
  background-color: #41f6d7;
  border-bottom-right-radius: 500%;
  border-top-right-radius: 500%;
  border: 2px solid #41f6d7;
}
.menu__footer {
  margin-left: 15px;
  padding: 0;
}
.icons-menu__footer {
  display: flex;
  flex-direction: row;
  gap: 10px;
}
.icons-menu__footer button {
  display: inline-block;
  border: 0;
  text-align: center;
  background-color: white;
  cursor: pointer;
}
.menu__icon-phone {
  width: 18px;
  margin-top: 10px;
  height: 18px;
}
.menu__el-phone {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  width: 40px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.menu__icon-sms {
  width: 20px;
  margin-top: 10px;
  height: 20px;
}
.menu__el-sms {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  width: 40px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.menu__icon-profile {
  width: 20px;
  margin-top: 10px;
  height: 18px;
}
.menu__el-profile {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  width: 40px;
  background-color: #ff3e79;
  border-radius: 50%;
  height: 40px;
}
.contacts {
  display: flex;
  flex-direction: column;
}
.contacts a[href^="mailto:"] {
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  text-decoration: none;
  color: black;
  margin-top: 16px;
  padding: 0;
}
.contacts a[href^="tel:"] {
  font-size: 24px;
  font-weight: 600;
  margin: 0;
  color: black;
  text-decoration: none;
  margin-top: 12px;
  padding: 0;
}
.lng {
  list-style-type: none;
  display: flex;
  flex-direction: row;
  gap: 7px;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
  margin-top: 40px;
  font-size: 24px;
}
.lng button {
  display: inline-block;
  border: 0;
  text-align: center;
  background-color: white;
  cursor: pointer;
}
.lng button:hover {
  color: #7e7e82;
}
  • Вопрос задан
  • 66 просмотров
3 комментария
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Бэкэнд-разработчик JavaScript
Wanted. • Москва
от 250 000 до 400 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
Ещё вакансии
Заказы с Хабр Фриланса
Нарисовать арты
26 дек. 2024, в 23:03
500 руб./в час
Парсер Криптография. Работа с TLS-fingerprint
26 дек. 2024, в 21:50
5000 руб./за проект
Автоматизация ChatGPT и постинга
26 дек. 2024, в 21:01
10000 руб./за проект
Ещё заказы