Откройте модальный всплывающий div с новым URL (например, instagram)

#javascript #php #jquery

Вопрос:

Я хочу повторить поведение Instagram для модальных всплывающих окон. Если вы перейдете на страницу IG (скажем https://www.instagram.com/thehughjackman /), и нажмите на одну из его фотографий, появится модальное всплывающее окно с увеличенным изображением, и URL-адрес немедленно изменится на конкретный URL-адрес страницы (например https://www.instagram.com/p/Bwedsp-HEF3 /). Когда вы нажимаете кнопку «Назад», модальное окно закрывается, а URL-адрес сбрасывается на URL-адрес главной страницы. Как я могу повторить это поведение?

Я использовал HTML5 history API для установки URL-адреса с помощью javascript, но по-прежнему не могу воспроизвести поведение кнопки «Назад». Вот несколько примеров кода, которые у меня есть (CSS не идеален, но более или менее это идея) —

JAVASCRIPT:

 function ChangeUrl(title, url) {
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
}

$(document).ready(function() {
    $("#test").click(function() {
        ChangeUrl('', '?q=abcd');
        $("#modal").html(`<img id="big" src="https://cdn.pixabay.com/photo/2014/04/14/20/11/japanese-cherry-trees-324175_960_720.jpg">`).show();
    });
});

CSS:

 #modal {
    display: none;
    width: 500px;
    margin: 20px auto;
    border: 2px solid #777;
}

#thumb {
    max-width: 200px;
    max-height: 200px;
    border: 1px solid #555;
}

#big {
    width: 100%;
}

HTML:

 <a href="#" id="test"><img id="thumb" src="https://cdn.pixabay.com/photo/2014/04/14/20/11/japanese-cherry-trees-324175_960_720.jpg"></a>

<div id="modal"></div>

Ответ №1:

Я бы посоветовал прослушать popState для обработки кнопки возврата следующим образом

 function ChangeUrl(title, url) {
    if (typeof (history.pushState) != "undefined") {
        var obj = { Title: title, Url: url };
        history.pushState(obj, obj.Title, obj.Url);
    } else {
        alert("Browser does not support HTML5.");
    }
}

$(document).ready(function() {
    $("#test").click(function() {
        ChangeUrl('', '?q=abcd');
        $("#modal").html(`<img id="big" src="https://cdn.pixabay.com/photo/2014/04/14/20/11/japanese-cherry-trees-324175_960_720.jpg">`).show();
    });
    window.onpopstate = function(event) {
      console.log('on popstate');
      $('#modal').html('');
    };

});

1. Проблема в том, что onpopstate запускается, когда я нажимаю на миниатюру, поэтому $("#modal").html() всегда устанавливается пустым.

2. Можете ли вы поделиться рабочей песочницей? Это кажется немного странным, потому что вы нажимаете состояние при отображении модального

3. developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers /. … Согласно этому so pushstate не будет запускать onpostate

4. интересно, я не могу сейчас продолжить расследование. но есть еще одна проблема jsfiddle.net/vsb23/2 который отлично работает с push и pop

5. Я подозреваю, потому что у вас есть # wrapped изображение, поэтому оно изменяет ссылку. измените его на другой диапазон ссылок тега или добавьте e.preventDefault

Ответ №2:

Предполагая, что вы используете модальный загрузчик, вы можете добавить функцию для модального события hide, которая вернет URL-адрес к тому, что он был. Что-то вроде этого:

 var stored_variable_of_previous_url;

$('#modal').on("hide.bs.modal", function (e) {
   history.replaceState(null, null, stored_variable_of_previous_url);
});

Описанный replaceState выше метод отключает URL-адрес в адресной строке без запроса ресурсов, а окно остается на той же странице. Это связано с тем, что replaceState не управляет историей браузера, он просто заменяет текущий URL-адрес в адресной строке.

Затем вы должны добавить что-то подобное в свою функцию, которая создает / открывает модальный:

 stored_variable_of_previous_url = window.location.href;

1. Спасибо, это сработает. Однако, как мне обработать событие, когда пользователь нажимает кнопку «Назад» в браузере?

2. Ну, тогда они возвращаются, что должно быть хорошо. Вы можете переопределить косую черту в том, что происходит, когда пользователь нажимает кнопку «Назад», но лучше этого не делать.