How to make modal windows remain when navigating between pages of the site?

Question

Angular

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

Answer 1

It is based on the principle of asynchrony. Given that the question contains the Angular tag, then in general it can be implemented approximately according to this principle:

<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>

As written above, there is a monitoring of the state change, relatively speaking, the main content and asynchronous. Page transitions and other actions in the field of view of the main content do not affect the asynchronous block, it is tracked independently.

Answer 2

Ajax to get page content without reloading it. Must be able to ajax + pushstate

Answer 3

Intercepted navigation to the URL without reloading the page.
Change URL without reloading the page

Answer 4

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