Javascript-форум - Всплавающее модальное окно с группой подписчиков вконтакте ???

Javascript-форум (https://javascript.ru/forum/)

- Элементы интерфейса (https://javascript.ru/forum/dom-window/)

- - Всплавающее модальное окно с группой подписчиков вконтакте ??? (https://javascript.ru/forum/dom-window/40119-vsplavayushhee-modalnoe-okno-s-gruppojj-podpischikov-vkontakte.html)

ilyas->

24.07.2013 14:14

Всплавающее модальное окно с группой подписчиков вконтакте ???

Нужно чтобы во всплывающем модальном окне отображалась группа подписчиков вконтакте, чтобы модальное окно всплывало самостоятельно раз в сутки при заходе на сайт для зарегистрированных и для гостей первый раз зашедших на сайт??? Может кто-нибуть уже сталкивался с подобной задачей???
На скрине то что мне нужно:

Сам я пробовал значит в модальное окно fancybox вставлял сгенерированный код виджета группы вконтакте, во всплывающем окне почему-то содержимое виджета не отображается, может из-за того что содержимое модального окна при срабатывании подгружается аяксом и сам виджет подгружается аяксом, получается двойной аякс и при всплытии модального окна отображается только серый фон, короче у меня ничего не получилось

devote

24.07.2013 14:34

Вы просите готовый скрипт с нуля.

Это работа, и за нее обычно платят деньги.
Для таких сообщений предназначен раздел форума "Работа".

Если вы все же хотите, чтобы вам помогли - приложите какие-то усилия сами и задавайте вопросы по ходу дела.

zilker

24.07.2013 15:06

Покажите, как вставляли. А вообще все эти окна - сущая бредятина. Ещё и для зарегистрированных - за что ж вы так пользователей то не любите?

mta88

24.07.2013 15:20

Цитата:

???

Цитата:

раз в сутки при заходе на сайт для зарегистрированных и для гостей первый раз зашедших на сайт

уже сделали? должно хватить обычных "cookies"

Цитата:

содержимое модального окна при срабатывании подгружается аяксом и сам виджет подгружается аяксом

так сколько у модального окна содержимого? одно или два?
в любом случае, можно сначала запустить один запрос, а по его окончании -- запустить второй
api для этого обычно существует

Цитата:

короче у меня ничего не получилось

мама там -->
а еще есть "firebug" и "chrome developer tools" -- незаменимые инструменты для разработчика

ilyas->

24.07.2013 15:55

Братцы мне кто-нибуть поможет?? ведь задачка и для других будет интересна и полезна

ruslan_mart

24.07.2013 16:11

function cookie(a, b) {
	if(b) document.cookie = a+'='+escape(b)+'; expires = Mon, 01-Jan-2999 00:00:00 GMT; path=/';
	var c = '(?:; )?'+a+'=([^;]*);?', d = new RegExp(c);
	return d.test(document.cookie) ? decodeURIComponent(RegExp['$1']) : 0;
}

if(!cookie('view')) {
	alert('Вы первый раз на сайте!');
	cookie('view', true);
}

ilyas->

24.07.2013 16:27

Цитата:

Сообщение от Ruslan_xDD (Сообщение 263995)

function cookie(a, b) {
	if(b) document.cookie = a+'='+escape(b)+'; expires = Mon, 01-Jan-2999 00:00:00 GMT; path=/';
	var c = '(?:; )?'+a+'=([^;]*);?', d = new RegExp(c);
	return d.test(document.cookie) ? decodeURIComponent(RegExp['$1']) : 0;
}

if(!cookie('view')) {
	alert('Вы первый раз на сайте!');
	cookie('view', true);
}

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

skrudjmakdak

24.07.2013 16:29

Цитата:

Сообщение от ilyas-> (Сообщение 263997)

как будет всплывать мое модальное окошко ???

ммм. ну наверное вместо алерта и впихивайте свое модальное окошко

ruslan_mart

24.07.2013 17:00

<div id="modalWin" style="background: #202020; border: 1px solid #888; color: #AAA; display: none; height: 60px; left: 50%; margin-left: -100px; padding-top: 60px; position: fixed; text-align: center; top: 150px; width: 200px">Модальное окно</div>

function cookie(a, b) {
	if(b) document.cookie = a+'='+escape(b)+'; expires = Mon, 01-Jan-2999 00:00:00 GMT; path=/';
	var c = '(?:; )?'+a+'=([^;]*);?', d = new RegExp(c);
	return d.test(document.cookie) ? decodeURIComponent(RegExp['$1']) : 0;
}

window.onload = function() {
	if(!cookie('view')) {
		document.getElementById('modalWin').style.display = 'block';
		cookie('view', true);
	}
}

ilyas->

24.07.2013 20:06

Цитата:

Сообщение от Ruslan_xDD (Сообщение 264006)

<div id="modalWin" style="background: #202020; border: 1px solid #888; color: #AAA; display: none; height: 60px; left: 50%; margin-left: -100px; padding-top: 60px; position: fixed; text-align: center; top: 150px; width: 200px">Модальное окно</div>

function cookie(a, b) {
	if(b) document.cookie = a+'='+escape(b)+'; expires = Mon, 01-Jan-2999 00:00:00 GMT; path=/';
	var c = '(?:; )?'+a+'=([^;]*);?', d = new RegExp(c);
	return d.test(document.cookie) ? decodeURIComponent(RegExp['$1']) : 0;
}

window.onload = function() {
	if(!cookie('view')) {
		document.getElementById('modalWin').style.display = 'block';
		cookie('view', true);
	}
}

Ruslan_xDD Спасибо!!! что помогаете мне. Как мне ваш код потестировать ???, хочу изменить отсчет времени следующим образом: на время для тестов чтобы всплывающее окно выскакивало промежутком раз в 5сек а не один раз в сутки, мне ведь нужно вставить сгенерированный код виджета моей группы вконтакте, я не могу ждать сутки,

ilyas->

24.07.2013 20:43

Как перенастроить промежуток времени с 1 суток на 5 сек, чтобы каждые пять сек всплывало окошко

ilyas->

24.07.2013 21:16

Люди ну не проходите мимо помогите пожалуйста !!!

dmitriymar

24.07.2013 22:25

Здравствуйте!

Судя по вашему сообщению, вы ну совсем не знаете javascript.

Освойте основы языка и вопрос отпадет сам, полностью или частично.
А с чем не справитесь - поможем.

На сайте javascript можно начать изучать с учебника, раздел Основы javascript.
Возможно, вам также понадобится HTML - учебник есть, например, здесь: http://ru.html.net/tutorials/html/

Задавайте конкретные вопросы по ходу дела.

ruslan_mart

25.07.2013 03:59

ilyas->, зачем? Просто удаляйте куки вручную.

Можно сделать не на один день, а на сессию (пока браузер не закроешь), просто так будет лучше. То есть, у пользователя появилось окно и больше не будет появлятся, пока он браузер не перезапустит:

function cookie(a, b) {
	if(b) document.cookie = a+'='+escape(b)+'; path=/';
	var c = '(?:; )?'+a+'=([^;]*);?', d = new RegExp(c);
	return d.test(document.cookie) ? decodeURIComponent(RegExp['$1']) : 0;
}

window.onload = function() {
	if(!cookie('view')) {
		document.getElementById('modalWin').style.display = 'block';
		cookie('view', true);
	}
}

ilyas->

25.07.2013 07:19

Ruslan_xDD сессии это же еще и пхп придётся задействовать, мне нужно чтобы только на js работало, я хочу настроить промежуток на 5сек ну или на 2 часа, чтобы промежуток по времени запоминался, а чтобы с перезапуском браузера такой вариант немного не подходит.
expires = Mon, 01-Jan-2999 00:00:00 GMT; path=/' как мне в этой записи высталять к примеру на 5 сек или на 2часа? даже если браузер перезапустился чтобы после первого захода запоминался промежуток

Ruslan_xDD я бы хотел уточнить один момент, я прикрутил модальное окно fancybox, получается в iframe загружается группа вконтакте, но это модальное окно всплывает по клику на ссылку с классом iframe, мне просто дизайн этого модального окна больше нравится, возможно ли как нибуть к нему привязать всплытие не поклику а по заданному промежутку времени которое запоминается в куках независимо от перезапуска браузера, спасибо!

ilyas->

25.07.2013 09:13

Все таки немного перезадам вопрос, ссылка на плагин fancybox, контент подгрудаемый в iframe, будет подгружаться моя группа вконтакте, почему fancybox? дизаин модального окошка понравился, вот этот fancybox должен всплывать раз в сутки не по клику а самостоятельно по событию onload для ненавязчивой рекламы моей группы вконтакте, даже если браузер перезапустили несколько все равно должен отсчитывать время после первого открытия сайта.
Задачка интересная, думаю многим будет полезно иметь в арсенале скрипт ненавязчивой рекламы во сплывающем окошке группы вконтакте, получается немного допиленный fancybox

ilyas->

25.07.2013 09:53

Ruslan_xDD помогите пожалуйста

ruslan_mart

25.07.2013 15:11

Цитата:

Сообщение от ilyas->

сессии это же php

Сессия в браузере, я же дал код.

ilyas->

25.07.2013 15:51

Цитата:

Сообщение от Ruslan_xDD (Сообщение 264172)

Сессия в браузере, я же дал код.

а как это все дело на модальном окне fancybox сделать?

ilyas->

25.07.2013 15:56

да и еще Ruslan_xDD я вашем коде менял временной промежуток на 5сек expires = Mon, 01-Jan-2999 00:00:05 GMT; path=/' просто в конце вместо 0 поставил 5, и почему-то блок при обновлении страницы не всплывает через 5сек ??? или я не правильно на 5сек выставляю??

ilyas->

25.07.2013 22:31

а есть ли готовый скрипт который я в вопросе расписал, ну или что -то похожее???
а то мне срочно нужно всплывающее модальное окно, появляющееся по задданому промежутку времени

ruslan_mart

27.07.2013 15:27

Вот, сделал такой вариант, думаю он будет куда лучше, чем с куками. Суть такая, каждый раз случайным образом открывается Ваше окно с подписчиками группы. Никаких jQuery.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script src="http://vk.com/js/api/openapi.js" type="text/javascript"></script>
<style type="text/css">
.vk {
	border: 1px solid #888;
	box-shadow: 0 0 5px #000;
	display: none;
	height: 400px;
	left: 50%;
	margin: -200px 0% 0% -110px;
	position: fixed;
	top: 50%;
	width: 200px;
	z-index: 10;
}
</style>
</head>

<body>
<div class="vk" id="vk"></div>

<script type="text/javascript">
window.onload = function() {
	var chance = 5; //Вероятность появления (1 на 5) [Вероятность появления окна: 20%] | ставьте большее число, если хотите, чтобы вероятность появления окна была меньше.
	var groupID = 20003922; //ID группы ВКонтакте
	
	/***********************************************/
	var a = Math.floor(Math.random() * (chance - 2));
	if(!a) {
		document.getElementById('vk').style.display = 'block';
		VK.Widgets.Group('vk', {mode: 0, width: '220', height: '400', color1: 'FFFFFF', color2: '2B587A', color3: '5B7FA6'}, groupID);
	}
}
</script>
</body>
</html>

Надеюсь, успокоилась Ваша душа и Вы перестанете создавать ~~нубские~~ бесмысленные темы.
Всё понятно? Или документацию к коду делать? :D

P.S.: если не понимаете, что такое id в группе, то скопируете ссылку в адресной строке группы ВКотакте и из скопированной ссылки вырежите ID группы: vk.com/public123456 или vk.com/club123456

ilyas->

27.07.2013 15:35

Ruslan_xDD спасибо за ваш труд, нооо мне нужно именно на fancybox в соседней теме у меня палемика идет, у меня уже все как надо всплывает по (.triger('click')) только не получается запустить с кодом куки

Гляньте пожалуйста что здесь не так

$(document).ready(function{

function fancybox_show(){
    $(".gallery3").fancybox({
                    autoSize: false,
                    autoDimensions: false,
                    width: 416,
                    height: 416,
                    fitToView: false,
                    padding: 0,
                    
                    href: '/personal/why_we/vk.html',
                    type: 'iframe'
                });
$(".gallery3").trigger('click');
}


var date = new Date();
var mSec = 5*1000;

function show_fancybox(){


  if( ! $.cookie('fancybox_show')  ){
    // запускаем fancybox

   
   date.setTime(date.getTime() +mSec);
   
   $.cookie('fancybox_show', date.getTime(),{ path: "/", expires: date});
  }
}

$(function(){

   show_fancybox()

   setInterval(show_fancybox, mSec)

})

})

ruslan_mart

27.07.2013 15:37

ilyas->, зачем? Выше готовый 100% рабочий код с готовым окном по центру.

ilyas->

27.07.2013 15:41

Цитата:

Сообщение от Ruslan_xDD (Сообщение 264470)

ilyas->, зачем? Выше готовый 100% рабочий код с готовым окном по центру.

у fancybox дизаин лучше, да и на сайте уже подключен fancybox для другого модального окна, получается для группы подписчиков всего-то немного кода написать и будет второе модальное окошко на том же плагине

ruslan_mart

27.07.2013 16:47

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<link rel="stylesheet" href="http://www.xiper.net/examples/js-plugins/gallery/fancybox/css/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="http://www.xiper.net/examples/js-plugins/gallery/fancybox/js/jquery.fancybox-1.3.4.pack.js"></script>
</head>

<body>

<script type="text/javascript">
$(function() {
	var all = {
		chance: 5, //Вероятность появления (1 на 20).
		groupID: 20003922, //ID группы ВКонтакте
		height: 400, //Высота окна
		width: 220 //Ширина окна
	};
	var a = Math.floor(Math.random() * (all.chance - 1));
	if(!a) $.fancybox({height: all.height, href: 'http://vk.com/widget_community.php?gid='+all.groupID+'&width='+all.width+'&height='+all.height, scrolling: 'no', type:'iframe', width: all.width});
});
</script>
</body>
</html>

ilyas->

27.07.2013 19:05

На другом форуме говорят что нужно еще подключить jquery.cookie

ruslan_mart

28.07.2013 04:39

ilyas->, хватит ерундой страдать, я Вам дал на пост выше хороший вариант без кук.

FlyerDell

03.09.2013 14:57

Ребята, спасибо вам огромнейшее!!! И за создание данной темы, и за дискуссию во время неё. Но особенную благодарность хотелось бы выразить Ruslan_xDD. Благодаря Вашим ответам, я до мелочей разобрался в нюансах при работе с cookies, и смог реализовать проект над которым давно ломал голову! Спасибо Вам огромное! Побольше бы таких отзывчивых специалистов.

John Doe

25.12.2013 14:26

Ruslan_xDD спасибо за скрипт, но в нем не работает кнопка "подписаться / отписаться". Подскажите как это исправить.

ruslan_mart

26.12.2013 14:37

John Doe,

http://learn.javascript.ru/play/toVxkc

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
  <script src="http://vk.com/js/api/openapi.js" type="text/javascript"></script>
<style type="text/css">
#vk {
	border: 1px solid #888;
	box-shadow: 0 0 5px #000;
    bottom: 0;
	display: none;
	height: 400px;
	left: 0;
	margin: auto;
	position: fixed;
    right: 0;
	top: 0;
	width: 220px;
	z-index: 10;
}
#vk iframe {
    border: none;
    height: 100%;
    width: 100%;
}
</style>
</head>

<body>
<div id="vk"></div>

<script type="text/javascript">
window.onload = function() {
	var chance = 5, //Вероятность появления (1 на 5) [Вероятность появления окна: 20%] | ставьте большее число, если хотите, чтобы вероятность появления окна была меньше.
		groupID = 20003922; //ID группы ВКонтакте
	
	/***********************************************/
	var a = Math.floor(Math.random() * (chance - 2));
	if(!a) {
      	var fr = document.createElement('iframe'),
            div = document.getElementById('vk');
      	fr.name = 'fXD49af5';
      	fr.src = 'http://vk.com/widget_community.php?gid='+groupID+'&width=220&height=400&&url='+location.href;
      	fr.scrolling = 'no';
		div.appendChild(fr);
      	div.style.display = 'block';
	}
}
</script>
</body>
</html>

John Doe

26.12.2013 15:58

Ruslan_xDD, я имел в виду скрипт с fancybox

demon046

27.01.2015 14:01

Цитата:

Сообщение от Ruslan_xDD

groupID = 20003922;

Добрый день а как быть если имя группы "текст" к примеру http://vk.com/mygroup

Часовой пояс GMT +3, время: 18:34.