Как сделать так, чтобы модальные окна оставались при переходах между страницами сайта?

Question

[Александр Романович]

Суть в чем. Есть сайт на WordPress, на сайте реализованы различные модальные окна - ролики YouTube, стримы Twich.., модальные окна масштабируются и можно одновременно смотреть несколько стримов и просматривать страницу.
Как сделать так, чтобы эти ролики не исчезали при переходах на другие страницы, как например на сайте vkontakte, т.е. модалки оставались поверх перезагружаемой страницы и просматриваемый ролик или стрим не останавливался.
Какими способами вообще можно это реализовать?

Comments

[Александр Романович]

Аяксом получать контент страницы не перезагружая ее. Надо уметь ajax + pushstate

Каждая новая страница имеет свой URL

[Андрей Гончаров]

поэтому + pushstate. К сожалению, более глубоко не смогу подсказать.

[Игорь Воротнёв]

Все правильно вам подсказали, history.pushstate позволяет как бы "лазить" по разным урл, при этом оставаясь без перезагрузки, на аяксе. Впрочем, по уму это все делается как SPA - single page app. Например, на React.

Answer 1

[Alexander Belov]

В основе лежит принцип асинхронности. Учитывая, что вопрос содержит тег Angular, то в общем можно реализовать приблизительно по такому принципу:

<my-app>
  <header>
     <nav>
         <a href="#">Page 1</a>
         <a href="#">Page 2</a>
         <a href="#">Page 3</a>
     </nav>
</header>//статичный блок
  
  <page1-content> </page1-content> 
  или 
  <page2-content> </page2-content>
  или 
  <page3-content> </page3-content>//основной динамичный блок, который меняется при переходе на нужную страницу
  
  <async-content> </async-content>//асинхронный динамичный блок с видео / музыкой / плясками

<footer></footer>//статичный блок
<my-app>

Как написали выше, идёт слежение за изменением состояния, условно говоря, основного контента и асинхронного. Переходы по страницам и др.действия в поле зрения основного контента не затрагивают асинхронный блок, он отслеживается независимо.

Answer 2

[Андрей Гончаров]

Аяксом получать контент страницы не перезагружая ее. Надо уметь ajax + pushstate

Answer 3

[Василий Назаров]

Перехватывается переход по URL без перезагрузки страницы.
Смена URL без перезагрузки страницы

Answer 4

[Александр Таратин]

https://ru.wordpress.org/plugins/advanced-ajax-pag... или аналогичные плагины
Сами модалки при этом создаем вне обновляемого элемента.