6

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.

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

Thanks a lot

brass
  • 73
  • 1
  • 1
  • 7
  • Could you provide us with JSfiddle, with your html and javascript so far? – YaBCK Sep 30 '15 at 11:58
  • 3
    This question has already been asked and has a very good answer @ http://stackoverflow.com/questions/24189428/display-a-popup-only-once-per-user – Lewis Sep 30 '15 at 11:59
  • you want help or a complete code? show us your effort and what have to tried so far. – Ricardo Pontual Sep 30 '15 at 12:00
  • There are tons of ready-made plugins with examples online. The jQuery UI Dialog is a very common example. Have you tried *anything* at all? We're happy to help with any problems you encounter while writing code. But if the problem is that you've given up and want someone else to write it for you, we can't really help with that. – David Sep 30 '15 at 12:00

2 Answers2

15

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

YaBCK
  • 2,949
  • 4
  • 32
  • 61
  • Thanks you a lot, it helped me. I made some changes, because it dosn't work at first, but then it did. // Save data to sessionStorage if(!sessionStorage.getItem('firstVisit')){ sessionStorage.setItem('firstVisit', '1'); }else{ sessionStorage.setItem('firstVisit', '0'); } /* Fix size on document ready.*/ $(function(){ if (sessionStorage.getItem('firstVisit') === "1"){ $(".message").css('display', 'inline') } // Aizver POPUP $("#message").click(function(){ $(".message").hide(); }); }); – brass Sep 30 '15 at 13:34
-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.

fragilewindows
  • 1,394
  • 1
  • 15
  • 26
DragonZero
  • 810
  • 5
  • 8