Как закрыть модальное окно и прокрутить страницу до якоря по ссылке?

  • 15 августа 2023 г. 6:16
Ответы на вопрос 3
Для решения данной проблемы можно использовать JavaScript для закрытия модального окна и прокрутки страницы к якорю. Для этого можно добавить обработчик события onclick на ссылку, который будет выполнять два действия: закрытие модального окна и прокрутку страницы.

Ниже приведен пример кода, который демонстрирует такое решение:

```html
<!-- HTML код модального окна -->
<div id="myModal" class="modal">
  <div class="modal-content">
    <a href="#" class="close">&times;</a>
    <h1>Модальное окно</h1>
    <p>Содержимое модального окна...</p>
    <a href="#anchor" class="scroll-to-anchor-link">Прокрутить страницу к якорю</a>
  </div>
</div>

<!-- HTML код якоря -->
<div id="anchor">Якорь</div>

<!-- JavaScript код -->
<script>
  // Получаем ссылку на модальное окно и якорную ссылку
  var modal = document.getElementById("myModal");
  var anchorLink = document.querySelector(".scroll-to-anchor-link");

  // Получаем кнопку для закрытия модального окна
  var closeButton = modal.querySelector(".close");
  
  // Функция для закрытия модального окна и прокрутки страницы
  function closeModalAndScroll() {
    modal.style.display = "none"; // Закрываем модальное окно

    // Плавно прокручиваем страницу до якоря
    document.getElementById("anchor").scrollIntoView({ behavior: 'smooth' });
  }
  
  // Добавляем обработчик событий для якорной ссылки
  anchorLink.addEventListener("click", closeModalAndScroll);

  // Добавляем обработчик событий для кнопки закрытия модального окна
  closeButton.addEventListener("click", closeModalAndScroll);
</script>
```

В данном примере при клике на ссылку с классом "scroll-to-anchor-link" модальное окно закрывается, а страница плавно прокручивается до элемента с id "anchor". Также при клике на кнопку закрытия модального окна с классом "close" выполняются те же действия.

Обратите внимание, что в этом примере используется плавная прокрутка страницы до якоря с помощью метода `scrollIntoView()` с опцией `behavior: 'smooth'`. Если поддержка плавной прокрутки является проблемой, вы можете заменить эту строку на `document.getElementById("anchor").scrollIntoView();` для прокрутки без анимации.
$.modal.close(); 
 Закрывайте модальное окно с помощью этого скрипта при клике по ссылке.
Похожие вопросы