Hello. With everything recently began to learn JS. Here decided to try with jquery. Started by parsing the POPUP window.
Its task is very simple http://prntscr.com/btke70
Display a window by clicking.
And so the JS code
$(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); }); }); .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; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <!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> I have two questions.
How to make a window output not by click, but by page loading script? Ie hit the page = window opened.
Second. How to tie a cookie to this window? Ie I saw it, clicked on the "x", and then the script does not display it to me, for example, for a week.
Thanks to all!
element.click();or a self-invoking function(function() { ... })();- Mr. Black