Display a form popup only once

Question

I think this might be the code I require, but how do I integrate it into my page code, should it be in Head/Body/ /etc.??? Your help would be appreciated!

Many Thanks

if($.cookie('popup') != 'seen'){
    $.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
    $j("#popup").delay(2000).fadeIn();
    $j('#popup-close').click(function(e) // You are clicking the close button
        {
        $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $j('#popup').click(function(e) 
        {
        $j('#popup').fadeOut(); 
    });
};

score 0 · Answer 1 · answered Oct 26 '16 at 16:12

Put it in a script block inside your head tag. Don't forget to include any libraries you need.

<html>
<head>
<script   src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src = "any other library you need"></script>
<script>
if($.cookie('popup') != 'seen'){
    $.cookie('popup', 'seen', { expires: 365, path: '/' }); // Set it to last a year, for example.
    $j("#popup").delay(2000).fadeIn();
    $j('#popup-close').click(function(e) // You are clicking the close button
        {
        $j('#popup').fadeOut(); // Now the pop up is hiden.
    });
    $j('#popup').click(function(e) 
        {
        $j('#popup').fadeOut(); 
    });
};
</script>
</head>
<body>
your html here
<some_element_with id="popup" />
</body>
</html>

score 0 · Answer 2 · edited Jun 20 '20 at 09:12

Best practice for importing scripts in your html is at the end of your body, right before the closing </body> tag so they load after the content does. The main reasons behind this are:

Scripts block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname.
The content your user can see should be loaded first, then the utility you provide with scripts.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <!-- CSS should be imported here -->
</head>
<body>
  
  <!-- JS scripts should go here (libraries first) -->
</body>
</html>

For more information you can visit this question:

Display a form popup only once

2 Answers2

Where is the best place to put script tags in HTML markup?