Здравствуйте. Со всем недавно начал изучать 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>
У меня два вопроса.
Как сделать вывод окна не по клику, а по сценарию загрузки страницы? Тоесть попал на страницу = открылось окно.
Второй.
Как подвязать куки к этому окну? Тоесть я его увидел, нажал на "х", и дальше мне скрипт его не выводит, например на протяжении недели.
Всем спасибо!