Javascript to hide a popup

I have this script to show a popup as the page loads:

$(function ()
{
    var overlay = $('<div id="overlay"></div>');
    overlay.show();
    overlay.appendTo(document.body);
    $('.popup').show();
    $('.close').click(function ()
    {
        $('.popup').hide();
        overlay.appendTo(document.body).remove();
        return false;
    });
    $('.x').click(function ()
    {
        $('.popup').hide();
        overlay.appendTo(document.body).remove();
        return false;
    });
});

And it works fine. Now I've been asked to hide the popup if the user has already seen this page, so I've appended to the above code

 function hidePopup()
 {
    $('.popup').hide();
    overlay.appendTo(document.body).remove();
    return false;
 }

But when I call it from a PHP script, it does not show the popup but the overlay is still there.

The PHP code is as follows:

session_start();
        if(!isset($_SESSION['seenPopup'])){
        echo "<div class='popup'>
            <div class='cnt223'>
            <img src='./images/close.ico' alt='quit' class='x' id='x' />
                <div class='divScrollabile'>
                <p><h3>
            POPUP TEXT HERE
                    <a href='' class='close'>Chiudi</a> 
                </p>
                </div>
            </div>
        </div>";
        $_SESSION['seenPopup']=true;
        }else{
            echo "<script type=\"text/javascript\">
            hidePopup();
            </script>";
        }