Popup On Website Load Once Per Session

I found some ways to make javascript/jquery popup windows. But, there were some problems, first of all, I am not very good with these two languages, just beginner. If there is any

Solution 1:

I know I shouldn't really do this and provide you with the answer without you trying to attempt it first because you won't be learning that way.

But I'm feeling nice today, so I'm providing you of a way of doing a pop up on first load and not loading the pop again until the session been destroyed.

You need to set the session, when you load the page by doing the following:

sessionStorage.setItem('firstVisit', '1');

Then you just need to check for the session like this:

If there is no session called firstVisit then show message box

if (!sessionStorage.getItem('firstVisit') === "1")
    {
       $(".message").show(); 
    } 

EXAMPLE

HTML

<divclass="message"><divclass="message_pad"><divid="message"></div><divclass="message_leave"></div></div></div>

JavaScript/JQuery

// Save data to sessionStorage
sessionStorage.setItem('firstVisit', '1');

/* Fix size on document ready.*/
$(function()
{
    if (!sessionStorage.getItem('firstVisit') === "1")
    {
       $(".message").show(); 
    } 

    //Close element.
    $(".message").click(function()
    {
       $(this).hide();
    });

    $(".message").css({
        'height': $(document).height()+'px'
    });
    $(".message_pad").css({
        'left': ($(document).width()/2 - 500/2)+'px'
    });
});
/*
* Fix size on resize.
*/
$(window).resize(function(){
    $(".message").css({
        'height': $(document).height()+'px'
    });
    $(".message_pad").css({
        'left': ($(document).width()/2 - 500/2)+'px'
    });
});

JSFIDDLE

Solution 2:

Take a look at jQuery modals - by following their example, you will create a hidden HTML element in your page (styled however you wish).

Then, within your $(document).ready() event, .show() the modal. The ready event only fires once after the webpage has finished loading.

There are many other ways to show custom modal popups within many other libraries; do some research since this is generally a trivial matter.