Question

5

Popup on website load once per session

rated 0 times [ 8] [ 3] / answers: 1 / hits: 34365 / 9 Years ago, wed, september 30, 2015, 12:00:00

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 ready code, for opening POPUP window on website load, but only once per browser session. It would be very nice, if someone could help me with this.

I need simple popup, with just some text in it, but design for popup box something good looking, not like original browser popup (like in image), of course, with closing button.

http://i.stack.imgur.com/xNWxf.png

Thanks a lot

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kalli

Add To Favorites

Follow

Total Points: 589

Total Questions: 105

Total Answers: 97

Location: Rwanda

Member since Thu, Feb 10, 2022

2 Years ago

answered 9 Years ago tai · Accepted Answer

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

<div class=message>

    <div class=message_pad>

        <div id=message></div>

        <div class=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