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

Суть в чем. Есть сайт на WordPress, на сайте реализованы различные модальные окна - ролики YouTube, стримы Twich.., модальные окна масштабируются и можно одновременно смотреть несколько стримов и просматривать страницу.
Как сделать так, чтобы эти ролики не исчезали при переходах на другие страницы, как например на сайте vkontakte, т.е. модалки оставались поверх перезагружаемой страницы и просматриваемый ролик или стрим не останавливался.
Какими способами вообще можно это реализовать?
  • Вопрос задан
  • 485 просмотров
Пригласить эксперта
Ответы на вопрос 4
AlexanderBelov
@AlexanderBelov
Frontend developer
В основе лежит принцип асинхронности. Учитывая, что вопрос содержит тег 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>


Как написали выше, идёт слежение за изменением состояния, условно говоря, основного контента и асинхронного. Переходы по страницам и др.действия в поле зрения основного контента не затрагивают асинхронный блок, он отслеживается независимо.
Ответ написан
Комментировать
agmegadeth
@agmegadeth
Веб-разработчик в дизайн студии
Аяксом получать контент страницы не перезагружая ее. Надо уметь ajax + pushstate
Ответ написан
Комментировать
Перехватывается переход по URL без перезагрузки страницы.
Смена URL без перезагрузки страницы
Ответ написан
Комментировать
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
https://ru.wordpress.org/plugins/advanced-ajax-pag... или аналогичные плагины
Сами модалки при этом создаем вне обновляемого элемента.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы