How is this javascript box called ?

[apart]

[Example](http://beta.eune.leagueoflegends.com/ “Example.”)

So when you visit the site for the first time on the certain IP this “pop up” box comesout that can be exited. What is this called ? I want to learn how to do it with some tutorial but cant find it since i dont know whats it called.

[JohnMotylJr]

@markomarkogame, it is done by setting a cookie in the browser. It then tests to see if the cookie is there and if it is, doesnt display the overlay #id

[apart]

Yes i understand that but how is this effect pop up done ? What is this box called ? Pop up ? I like how it can be exited.

[JohnMotylJr]

You can make that element anything you want. You can create an overlay and then center an intro message with a crazy z-index so nothing else can be done until the user closes the box.

[apart]

Thanks so now I need to find out what is it called that ability to close off a div and that cookie tracker ..

[JohnMotylJr]

@markomarkogame Hey, if you look on that site’s resources (Chrome F12 / ‘Inspect Element’) you will see something called jquery.cookie.js, i am sure that is what is being used to set/get the cookie.

This is the link that shows the code to test the cookie.

(function ($) {

Drupal.behaviors.LolSneakPeekPrestitialOverlay = {

attach: function (context) {

// Get the value that stores whether user has visited the site.

var visited = $.cookie('Drupal.LoLSneakPeekVisited');

// If this is the user's first visit, invoke an overlay.

if (visited != 1) {

// Although this module depends on the Colorbox, we can't guarantee that

// the library will exist.

if ($.colorbox != undefined) {

$.colorbox({

href: Drupal.settings.basePath + Drupal.settings.pathPrefix + "sneak-peek/overlay",

iframe: true,

width: "750px",

height: "350px",

innerWidth: "750px",

innerHeight: "350px",

opacity: 0.7,

scrolling: false,

className: 'beta-interstitial-colorbox'



});

}

// Set a cookie so the user only views this overlay once.

$.cookie('Drupal.LoLSneakPeekVisited',

1, {

path: Drupal.settings.basePath,

expires: 36500

});

}

}

};

})(jQuery);

If you want me to create a pen with a demo let me know.

[JohnMotylJr]

@markomarkogame && @mintertweed

Here is a simple CodePen use case in which i have an element with a greeting, i test to see if the cookie is set, than i display the greeting and call a one liner function to set the cookie. Refresh all you want but the cookie is set for a year and the message wont pop up until then.

There are tons of things you can do with this as far as ui, etc.. but this pen is very simple and not even elegant ( it would be better to create the message box with javascript so you dont have an unused element in your page).

Any questions or comments lemme know.

References:

jquery.cookie.js on GitHub

Official jQuery Repository with jquery.cookie.js

Info for jQuery.cookie.js

[JohnMotylJr]

@markomarkogame && @mintertweed

This also works with localStorage…
http://codepen.io/johnmotyljr/pen/crCJG

This pen has a more dynamic approach: http://codepen.io/johnmotyljr/full/vGEFL

^ view in chrome, for some reason FireFox doesnt like this pen?!?!

[Author]

Posts