Как обновить / изменить URL, когда загружается модальное окно?

Содержание

Вопрос или проблема
Ответ или решение
1. Описание задачи
2. Использование Bootstrap для модальных окон
Пример с jQuery
Пример на чистом JavaScript
3. Итоговые рекомендации
Заключение

Вопрос или проблема

Я ищу способ сделать всплывающее окно с формой, и когда всплывающее окно загружается, URL-адрес меняется.

Например, если человек просматривает web.com/about и всплывающее окно загружается, тогда URL-адрес изменится на web.com/about?utm_form=popup

Это возможно?

Может быть, он будет добавлять этот utm к URL-адресу, когда всплывающее окно открыто, и удалять его, когда закрыто? Плагин был бы полезен.

Спасибо за любые мысли.

Если вы используете модальное окно Bootstrap, то приведенный ниже код работает:

$('#myModal').on('loaded.bs.modal', function (e) {
  if (typeof (history.pushState) != "undefined") {
        var obj = { Title: "О нас", Url: 'about?utm_form=popup' };
        history.pushState(obj, obj.Title, obj.Url);
    }
})

Вы можете использовать чистый JavaScript вместо jQuery.

document.getElementById('myModal').addEventListener('shown.bs.modal', function (e) {
    if (typeof (history.pushState) !== "undefined") {
        var obj = { Title: "О нас", Url: 'about?utm_form=popup' };
        history.pushState(obj, obj.Title, obj.Url);
    }
});

Структура HTML модального окна

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Название модального окна</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

Добавьте Bootstrap и, при необходимости, jQuery (если требуется для других частей вашего проекта)

<!-- Bootstrap CSS -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">

<!-- Необязательно: jQuery, если требуется для других частей вашего проекта -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Добавьте фрагмент кода JavaScript прямо перед закрывающим тегом </body> или в отдельном файле JavaScript, который включен в конце вашего HTML-документа:

<script>
document.getElementById('myModal').addEventListener('shown.bs.modal', function (e) {
    if (typeof (history.pushState) !== "undefined") {
        var obj = { Title: "О нас", Url: 'about?utm_form=popup' };
        history.pushState(obj, obj.Title, obj.Url);
    }
});
</script>

Этот подход с чистым JavaScript достигает такой же функциональности, как и версия jQuery, которую вы предоставили. Это немного запутанно, вы можете использовать простой Bootstrap, но делая это, вы можете многому научиться.

Ответ или решение

Чтобы обновить или изменить URL, когда загружается модальное окно (попап), действовать следует следующим образом. Я приведу вам подробное руководство, различающиеся варианты реализации и некоторые рекомендации.

1. Описание задачи

Когда пользователь открывает модальное окно на сайте (например, web.com/about), требуется изменить URL страницы, добавив параметр, такой как ?utm_form=popup. При закрытии модального окна этот параметр должен быть удалён.

2. Использование Bootstrap для модальных окон

Если вы используете Bootstrap, это значительно облегчает задачу. Рассмотрим два примера: один на jQuery, другой на чистом JavaScript.

Пример с jQuery

<!-- HTML структура модального окна -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Заголовок модального окна</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Закрыть">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button>
        <button type="button" class="btn btn-primary">Сохранить изменения</button>
      </div>
    </div>
  </div>
</div>

<!-- Подключение необходимых библиотек -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

Добавьте следующий код JavaScript, чтобы изменить URL:

$('#myModal').on('shown.bs.modal', function () {
    if (typeof history.pushState !== "undefined") {
        var newUrl = window.location.pathname + '?utm_form=popup';
        history.pushState({ path: newUrl }, '', newUrl);
    }
});

$('#myModal').on('hidden.bs.modal', function () {
    if (typeof history.pushState !== "undefined") {
        history.back();  // Вернуться к предыдущему URL
    }
});

Пример на чистом JavaScript

Если вы предпочитаете избегать jQuery, вот аналогичный код с использованием чистого JavaScript:

document.getElementById('myModal').addEventListener('shown.bs.modal', function () {
    if (typeof history.pushState !== "undefined") {
        var newUrl = window.location.pathname + '?utm_form=popup';
        history.pushState({ path: newUrl }, '', newUrl);
    }
});

document.getElementById('myModal').addEventListener('hidden.bs.modal', function () {
    if (typeof history.pushState !== "undefined") {
        history.back();  // Вернуться к предыдущему URL
    }
});

3. Итоговые рекомендации

Проверяйте совместимость: Убедитесь, что все используемые вами браузеры поддерживают метод pushState для изменения URL.
Пользуйтесь семантическими URL: Это помогает при индексировании страниц поисковыми системами, повышая ваши SEO-рейтинги.
Тестируйте функциональность: Убедитесь, что после закрытия попапа URL корректно возвращается, а параметры не остаются в адресной строке.

Заключение

Изменение URL при открытии и закрытии модального окна — это достаточно простая, но важная задача. С помощью Bootstrap и небольшого количества JavaScript, вы сможете достичь желаемого результата, улучшая пользовательский опыт на своем сайте. 如果 вам нужны дополнительные советы или информация, пожалуйста, дайте знать.