Pop-up when you log in to the site

And so, dear friends, as you already understood from the title of the article, today we will talk about how to add to the site Pop-up which will appear immediately as soon as the user opens your site or the page you need.

You probably already noticed this functional several times, which is implemented on many sites, and it looks very nice.

Personally, I certainly do not like to use all sorts of windows of this kind, but still sometimes without a pop-up window on the site can not do. Since this is a very convenient opportunity to present to your visitor important information in your opinion, about a discount, shares, news, or just about anything, or notify or warn him!

Today we will consider a very effective and at the same time very simple method of displaying a pop-up window on the site, while at the opening of this popup window the background of the site will be blurred in order to concentrate all the attention of the user on the required information that you specify in this pop-up Window.

Plus we will add a live button to this window when clicking on which the user will get to the page prepared by you in advance, thus we will give our pop-up window more informative, that is, make it more beautiful and understandable ....

An example of what this pop-up window looks like you can see on the photo below:

Pop-up when you log in to the site

Well, or you can see a live example of a pop-up window on our website:

You can download the ready-made source code for the pop-up window script using the button above, and below, we will analyze the script and add it to your site.

And so we proceed to create a pop-up window that will consist of a title (the title of the window), and a container from your text and a button to jump to a page prepared in advance, we will also add a window close button with a small animation, of course.

Point one:

Create a shell from HTML code, in which we will put the elements of our window and put it all in a single container:

We added a pop-up window title, a short text, a full description, as well as a live and realistic button to go to the page we need, which will come to life when we hover over it.

Point two:

In this paragraph, we will add styles to the CSS pop-up window to form the correct and nice view for the window. Form and define the parameters of the window container, add a fill color, and give the style to the button. Also we'll add here blurring the background of the window , in order to attract the attention of the visitor to Information located in the window, that would not be distracting to everything else.

Point three:

The last item we will have is JS code connection for the ability to display the window, as well as add the ability to turn background blur on and off.

Well, that's all, now you will have a stylish modern and adaptive pop-up window on your site, use it!