16.07.2016, 11:53
|
|
Интересующийся
|
|
Регистрация: 16.07.2016
Сообщений: 19
|
|
|
Вызов сценария при загрузке
Здравствуйте. Со всем недавно начал изучать JS. Вот решил попробывать с jquery. Начал с разбора POPUP окна.
Задача его очень проста
http://prntscr.com/btke70
Вывести окно по клику.
И так код JS
$(document).ready(function() {
$('body').append('<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top">text</h2></div><div class="bottom">text</div></div>');
$('body').append('<div id="blackout"></div>');
var boxWidth = 800;
function centerBox() {
/* Preliminary information */
var winWidth = $(window).width();
var winHeight = $(document).height();
var scrollPos = $(window).scrollTop();
/* auto scroll bug */
/* Calculate positions */
var disWidth = (winWidth - boxWidth) / 2
var disHeight = scrollPos + 150;
/* Move stuff about */
$('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
$('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
return false;
}
$(window).resize(centerBox);
$(window).scroll(centerBox);
centerBox();
$('[class*=popup-link]').click(function(e) {
/* Prevent default actions */
e.preventDefault();
e.stopPropagation();
/* Get the id (the number appended to the end of the classes) */
var name = $(this).attr('class');
var id = name[name.length - 1];
var scrollPos = $(window).scrollTop();
/* Show the correct popup box, show the blackout and disable scrolling */
$('#popup-box-'+id).show();
$('#blackout').show();
$('html,body').css('overflow', 'hidden');
/* Fixes a bug in Firefox */
$('html').scrollTop(scrollPos);
});
$('[class*=popup-box]').click(function(e) {
/* Stop the link working normally on click if it's linked to a popup */
e.stopPropagation();
});
$('html').click(function() {
var scrollPos = $(window).scrollTop();
/* Hide the popup and blackout when clicking outside the popup */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
$('.close').click(function() {
var scrollPos = $(window).scrollTop();
/* Similarly, hide the popup and blackout when the user clicks close */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
});
Разметка CSS
.popup-box {
position: absolute;
border-radius: 5px;
background: #fff;
display: none;
box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
font-family: Arial, sans-serif;
z-index: 9999999;
font-size: 14px;
}
.popup-box .close {
position: absolute;
top: 0px;
right: 0px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
cursor: pointer;
color: #434343;
padding: 20px;
font-size: 20px;
}
.popup-box .close:hover {
color: #000;
}
.popup-box h2 {
padding: 0;
margin: 0;
font-size: 18px;
}
.popup-box .top {
padding: 20px;
}
.popup-box .bottom {
background: #eee;
border-top: 1px solid #e5e5e5;
padding: 20px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#blackout {
background: rgba(0,0,0,0.3);
position: absolute;
top: 0;
overflow: hidden;
z-index: 9999;
left: 0;
display: none;
}
HTML
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="javascript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<a class="popup-link-1" href="">Нажми на меня, для вывода popup окна!</a>
</body>
</html>
У меня два вопроса.
Как сделать вывод окна не по клику, а по сценарию загрузки страницы? Тоесть попал на страницу = открылось окно.
Второй.
Как подвязать куки к этому окну? Тоесть я его увидел, нажал на "х", и дальше мне скрипт его не выводит, например на протяжении недели.
Всем спасибо!
|
|
16.07.2016, 12:27
|
|
Аспирант
|
|
Регистрация: 14.07.2016
Сообщений: 86
|
|
|
$('[class*=popup-link]').trigger('click'); -вызываем нажатие кнопки
В JavaScript куки доступны с помощью свойства cookie объекта document. Создать куки можно следующим образом:
document.cookie = "name=значение; expires=дата; path=путь;
domain=домен; secure";
... и получить весь сохраненый набор куков так:
var x = document.cookie;
|
|
16.07.2016, 13:33
|
|
Интересующийся
|
|
Регистрация: 16.07.2016
Сообщений: 19
|
|
|
Спасибо.
Триггер поставил.
В двух словах или если можно примером.
Конструкцию по кукам. Думаю поставлю ее сам.
Нужно что бы скрипт запоминал что пользователь скрывал окно. Если пользователь скрывал окно, оно ему не отображаеться неделю.
Если данных о куках нет, окно выводиться.
|
|
16.07.2016, 15:14
|
|
Аспирант
|
|
Регистрация: 14.07.2016
Сообщений: 86
|
|
|
У тебя есть обработчик закрытия окна
$('.close').click(function() {
1. заносишь в нем в куки текущую дату
2. Триггер запихиваешь в условие, если нет куки даты или дата устарела (старше 7 дней) - вызываем
3. Profit
|
|
16.07.2016, 20:41
|
|
Интересующийся
|
|
Регистрация: 16.07.2016
Сообщений: 19
|
|
Вообщем застрял на одноразовой куки.
var mydate = new Date;
alert( mydate.getDate() );
document.cookie = "name=popup; expires=mydate.getDate(); path=/; domain=ukraina.market; secure";
Первое, дата. Должна мне отдать число 16. Я так понимаю срок жизни 16 дней.
Второе простановка самих кук. В браузер кука передается, но с нулевым значеним жизни When the browsing session ends.
Или все что записано в "" выполняеться как есть. Как кусок текста. |
|
16.07.2016, 21:59
|
|
Аспирант
|
|
Регистрация: 14.07.2016
Сообщений: 86
|
|
Дату нужно достать из строки
Пример из первого нагугленого
Ставим куки с датой истечения через 60 секунд
var date = new Date(new Date().getTime() + 60 * 1000);
document.cookie = "name=value; path=/; expires=" + date.toUTCString();
|
|
17.07.2016, 00:03
|
|
Интересующийся
|
|
Регистрация: 16.07.2016
Сообщений: 19
|
|
Я так понял мне лучше сразу читать азы. Т.к немогу собрать элеменатрные функции до кучи.
И все время пытаюсь реализовать код костылем. Вот сейчас ставлю триггер close на истечение кук. По идеи нужно просто отключить вывод. А я просто ставлю
$('[class*=popup-link]').trigger('click');
if (date.toUTCString() < 0) {
$('.close').trigger('click');
};
Хотя понимаю что значение date.toUTCString() подтягивается не с кук а в реальном времени.
Последний раз редактировалось LebedevUA, 17.07.2016 в 00:57.
|
|
17.07.2016, 00:22
|
|
Интересующийся
|
|
Регистрация: 16.07.2016
Сообщений: 19
|
|
Вообщем код сейчас такой
date = new Date();
date.setHours(date.getHours() + 1);
document.cookie = "name=popup; expires=" + date.toUTCString();
document.write(document.cookie);
$(document).ready(function() {
$('body').append('<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2>mytext</h2></div><div class="bottom">mytext</div></div>');
$('body').append('<div id="blackout"></div>');
var boxWidth = 800;
function centerBox() {
/* Preliminary information */
var winWidth = $(window).width();
var winHeight = $(document).height();
var scrollPos = $(window).scrollTop();
/* auto scroll bug */
/* Calculate positions */
var disWidth = (winWidth - boxWidth) / 2
var disHeight = scrollPos + 150;
/* Move stuff about */
$('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
$('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
return false;
}
$(window).resize(centerBox);
$(window).scroll(centerBox);
centerBox();
$('[class*=popup-link]').click(function(e) {
/* Prevent default actions */
e.preventDefault();
e.stopPropagation();
/* Get the id (the number appended to the end of the classes) */
var name = $(this).attr('class');
var id = name[name.length - 1];
var scrollPos = $(window).scrollTop();
/* Show the correct popup box, show the blackout and disable scrolling */
$('#popup-box-'+id).show();
$('#blackout').show();
$('html,body').css('overflow', 'hidden');
/* Fixes a bug in Firefox */
$('html').scrollTop(scrollPos);
});
$('[class*=popup-box]').click(function(e) {
/* Stop the link working normally on click if it's linked to a popup */
e.stopPropagation();
});
$('html').click(function() {
var scrollPos = $(window).scrollTop();
/* Hide the popup and blackout when clicking outside the popup */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
$('.close').click(function() {
var scrollPos = $(window).scrollTop();
/* Similarly, hide the popup and blackout when the user clicks close */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
$('[class*=popup-link]').trigger('click');
});
Последний раз редактировалось LebedevUA, 17.07.2016 в 07:45.
|
|
17.07.2016, 11:19
|
|
Аспирант
|
|
Регистрация: 14.07.2016
Сообщений: 86
|
|
$('[class*=popup-link]').trigger('click');
if (date.toUTCString() < 0) {
$('.close').trigger('click');
};
Зачем тебе запускать тригер открытия окна и потом по условию его закрывать, когда можно по условию его и не открывать?
Зачем в селекторах использовать * и ^, понимаешь ли ты их назначение, действительно без них не обойтись?
Зачем кругом блочить всплытие и действия браузера по умолчанию?
Тот функционал что тебе нужно реализуется в десяток строк, остальное делается на html и css. Не знаю где ты этот пример с окном нашел, но в нем просто куча мусора (имхо конечно).
Начни с заданий попроще, благо в интернете уроков полно, и бери в привычку все непонятное гуглить.  |
|
18.07.2016, 05:18
|
|
Интересующийся
|
|
Регистрация: 16.07.2016
Сообщений: 19
|
|
Сообщение от Spass
|
$('[class*=popup-link]').trigger('click');
if (date.toUTCString() < 0) {
$('.close').trigger('click');
};
Зачем тебе запускать тригер открытия окна и потом по условию его закрывать, когда можно по условию его и не открывать?
Зачем в селекторах использовать * и ^, понимаешь ли ты их назначение, действительно без них не обойтись?
Зачем кругом блочить всплытие и действия браузера по умолчанию?
Тот функционал что тебе нужно реализуется в десяток строк, остальное делается на html и css. Не знаю где ты этот пример с окном нашел, но в нем просто куча мусора (имхо конечно).
Начни с заданий попроще, благо в интернете уроков полно, и бери в привычку все непонятное гуглить.
|
Я только учусь. Просто беру за пример готовый скрипт и разбираю его на куски, смотрю как все устроенно.
Непонятное гуглю, есть ответы, но подточить под мою ситуацию мне пока сложно. Говрорю же, учусь .
$('[class*=popup-link]').trigger('click');
if (date.toUTCString() < 0) {
$('.close').trigger('click');
Он же не отслеживает куки. Тоесть я закрыл окно, ф5 - снова появляеться попап. По идеи он не должен отображаться. Пока не пройдут куки. В браузер они ставяться, document.cookies эту куку показывает, но правило не рабатывает. Сейчас код такой.
date = new Date();
date.setHours(date.getHours() + 1);
document.cookie = "name=popup; expires=" + date.toUTCString();
document.write(document.cookie);
$(document).ready(function() {
$('body').append('<div class="popup-box" id="popup-box-1"><div class="close">X</div><div class="top"><h2>текст</h2></div><div class="bottom">текст</div></div>');
$('body').append('<div id="blackout"></div>');
var boxWidth = 800;
function centerBox() {
/* Preliminary information */
var winWidth = $(window).width();
var winHeight = $(document).height();
var scrollPos = $(window).scrollTop();
/* auto scroll bug */
/* Calculate positions */
var disWidth = (winWidth - boxWidth) / 2
var disHeight = scrollPos + 150;
/* Move stuff about */
$('.popup-box').css({'width' : boxWidth+'px', 'left' : disWidth+'px', 'top' : disHeight+'px'});
$('#blackout').css({'width' : winWidth+'px', 'height' : winHeight+'px'});
return false;
}
$(window).resize(centerBox);
$(window).scroll(centerBox);
centerBox();
$('[class*=popup-link]').click(function(e) {
/* Prevent default actions */
e.preventDefault();
e.stopPropagation();
/* Get the id (the number appended to the end of the classes) */
var name = $(this).attr('class');
var id = name[name.length - 1];
var scrollPos = $(window).scrollTop();
/* Show the correct popup box, show the blackout and disable scrolling */
$('#popup-box-'+id).show();
$('#blackout').show();
$('html,body').css('overflow', 'hidden');
/* Fixes a bug in Firefox */
$('html').scrollTop(scrollPos);
});
$('[class*=popup-box]').click(function(e) {
/* Stop the link working normally on click if it's linked to a popup */
e.stopPropagation();
});
$('html').click(function() {
var scrollPos = $(window).scrollTop();
/* Hide the popup and blackout when clicking outside the popup */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
$('.close').click(function() {
var scrollPos = $(window).scrollTop();
/* Similarly, hide the popup and blackout when the user clicks close */
$('[id^=popup-box-]').hide();
$('#blackout').hide();
$("html,body").css("overflow","auto");
$('html').scrollTop(scrollPos);
});
$('[class*=popup-link]').trigger('click');
if (date.toUTCString() < 0) {
$('.close').trigger('click');
};
});
Большое спасибо за потраченное время в теме
|
|
|
|
