Вызов сценария при загрузке
Здравствуйте. Со всем недавно начал изучать 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> У меня два вопроса. Как сделать вывод окна не по клику, а по сценарию загрузки страницы? Тоесть попал на страницу = открылось окно. Второй. Как подвязать куки к этому окну? Тоесть я его увидел, нажал на "х", и дальше мне скрипт его не выводит, например на протяжении недели. Всем спасибо! |
$('[class*=popup-link]').trigger('click'); -вызываем нажатие кнопки
В JavaScript куки доступны с помощью свойства cookie объекта document. Создать куки можно следующим образом: document.cookie = "name=значение; expires=дата; path=путь; domain=домен; secure"; ... и получить весь сохраненый набор куков так: var x = document.cookie; |
Спасибо.
Триггер поставил. В двух словах или если можно примером. Конструкцию по кукам. Думаю поставлю ее сам. Нужно что бы скрипт запоминал что пользователь скрывал окно. Если пользователь скрывал окно, оно ему не отображаеться неделю. Если данных о куках нет, окно выводиться. |
У тебя есть обработчик закрытия окна
$('.close').click(function() { 1. заносишь в нем в куки текущую дату 2. Триггер запихиваешь в условие, если нет куки даты или дата устарела (старше 7 дней) - вызываем 3. Profit |
Вообщем застрял на одноразовой куки.
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. Или все что записано в "" выполняеться как есть. Как кусок текста. |
Дату нужно достать из строки
Пример из первого нагугленого Ставим куки с датой истечения через 60 секунд var date = new Date(new Date().getTime() + 60 * 1000); document.cookie = "name=value; path=/; expires=" + date.toUTCString(); |
Я так понял мне лучше сразу читать азы. Т.к немогу собрать элеменатрные функции до кучи.
И все время пытаюсь реализовать код костылем. Вот сейчас ставлю триггер close на истечение кук. По идеи нужно просто отключить вывод. А я просто ставлю
$('[class*=popup-link]').trigger('click');
if (date.toUTCString() < 0) {
$('.close').trigger('click');
};
Хотя понимаю что значение date.toUTCString() подтягивается не с кук а в реальном времени. |
Вообщем код сейчас такой
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');
});
|
$('[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');
};
});
Большое спасибо за потраченное время в теме :) |
| Часовой пояс GMT +3, время: 06:05. |