Только начало масштабного всплывающего окна, когда тело имеет определенный класс

Я работаю с magnific popup и хочу показать видео, когда кто-то подходит в сторону (в том числе не показывать его каждый раз, когда пользователь приходит на сайт, а значит, и локальную часть). Это все работает и вот код:Только начало масштабного всплывающего окна, когда тело имеет определенный класс

(
    function($) { 
     $(window).load(function() { 
      if(localStorage.getItem('popState') != 'shown'){ 
      setTimeout(function(){ 
       $.magnificPopup.open({ 
        items: { 
         src: 'https://www.youtube.com/watch?v=blabla' 
        }, 
        type: 'iframe', 
        iframe: { 

         patterns: { 
         youtube: { 
       index: 'youtube.com/', 
       id: 'v=', 
       src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0' 
      } 
     } 
    } 
       }); 
      }, 5000); 
      localStorage.setItem('popState','shown')} 
     }); 
    }) 
(jQuery);

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

<body class="lang-en-EN">

или

<body class="lang-de-DE">

Есть ли способ, чтобы запустить всплывающее окно, когда изменяется класс от языка EN в DE?

Update: Вот Fiddle

источник

2015-04-24 Paranoia

Это зависит от того, что меняется класс, перезагружается ли страница или нет? – adeneo

Проверьте, есть ли у тела класс ... –

Да, например 'if ($ (body) .hasClass (" lang-en-EN "))' –

В Условный оператор у вас уже есть, просто проверить для класса, а также, добавляя (например) $(body).hasClass("lang-en-DE"):

(function($) { 
    $(window).load(function() { 
     if($(body).hasClass("lang-en-DE") && localStorage.getItem('popState') != 'shown'){ 
     setTimeout(function(){ 
      $.magnificPopup.open({ 
       items: { 
        src: 'https://www.youtube.com/watch?v=blabla' 
       }, 
       type: 'iframe', 
       iframe: { 
        patterns: { 
         youtube: { 
          index: 'youtube.com/', 
          id: 'v=', 
          src: 'http://www.youtube.com/embed/%id%?rel=0&autoplay=0' 
         } 
        } 
       } 
      }); 
     }, 5000); 
     localStorage.setItem('popState','shown')} 
    }); 
}) 
(jQuery);

источник

2015-04-24 12:54:48 Connum

Я обновил это со скрипкой (http://jsfiddle.net/1cs93ed8/), но всплывающее окно не появляется. Я также не получаю никаких ошибок. – Paranoia

Ну, вы настроили этот jsfiddle для выполнения JS-кода onLoad, но в самом коде вы ждете снова $ (window) .load(), который уже был запущен, и поэтому не будет запускаться снова. Измените его на «Нет обертывания в голове» и очистите свой локальный хранилище, тогда он будет работать: http : //jsfiddle.net/1cs93ed8/1/ - и, конечно же, он должен работать на обычной странице, связанной с событием загрузки. – Connum

Чтобы сделать это еще более ясным, вот еще одно обновление с таймаутом 0 и проверка localStorage закомментирована, который показывает всплывающее окно каждый раз, если задан класс: http://jsfiddle.net/1cs93ed8/2/ – Connum

Только начало масштабного всплывающего окна, когда тело имеет определенный класс

ответ

Смежные вопросы