trak_ivan
@trak_ivan

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

Есть код, который после 25 секунд показывает окно, в котором виджет группы ВК.
Как ограничить, чтобы выполнялось это только для компов т.е. ограничеть для мобильной версий?
<!-- Модальное Окно  -->
	<div id="overlay">
		<div class="popup">	
			
			
			<script type="text/javascript" src="//vk.com/js/api/openapi.js?122"></script>

			<!-- VK Widget -->
			<div id="vk_groups"></div>
			<script type="text/javascript">
			VK.Widgets.Group("vk_groups", {mode: 0, width: "350", height: "350", color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, 72690358);
			</script>	
			<p>Закрыть</p>
			<button class="close" title="Закрыть" onclick="document.getElementById('overlay').style.display='none';"></button>
		</div>
		
	</div>
		<script src="http://yastatic.net/jquery/2.1.4/jquery.min.js"></script>
        <script src="http://yastatic.net/jquery/cookie/1.0/jquery.cookie.min.js"></script>
        <script type="text/javascript">
        $(function() {
            // Проверяем запись в куках о посещении
            // Если запись есть - ничего не делаем
            if (!$.cookie('hideModal')) {
           // если cookie не установлено появится окно
           // с задержкой 5 секунд
            var delay_popup = 5000;
            setTimeout("document.getElementById('overlay').style.display='block'", delay_popup);
            }
            // Запоминаем в куках, что посетитель уже заходил
            $.cookie('hideModal', true, {
            // Время хранения cookie в днях
                expires: 7,
                path: '/'
            });
        });
        </script>
  • Вопрос задан
  • 624 просмотра
Решения вопроса 2
FFxSquall
@FFxSquall
Могу писать код, могу не писать
Перед показом сделать проверку, например такую.
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {

}

или использовать готовую библиотеку например эту
Ответ написан
FreedomRun
@FreedomRun
веб-программист
самое простое в if добавить $(window).width() > 960, где 960 пороговая ширина экрана
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
@ComodoHacker
Не показывайте самостоятельно выскакивающие попапы никому и никогда. Это не только предотвратит отток пользователей, но и сохранит вам карму.
Ответ написан
@ArturArturov
Ответ написан
Комментировать
AMar4enko
@AMar4enko
Сделайте media-query на размер экрана, поставьте overlay position: absolute, нулевую ширину/высоту и overflow: hidden
Ответ написан
Комментировать
squitcher
@squitcher
Верстальщик
медиа запросы не справляются ? display: none или что там
Ответ написан
Комментировать
Ваш ответ на вопрос

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

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