-1

i have a popup which shows on page load. i want it to be displayed only once.
here is my code: (javascript):

<script type="text/javascript">
    $(document).ready(function () {

        var id = '#dialog';

        //Get the screen height and width
        var maskHeight = $(document).height();
        var maskWidth = $(window).width();

        //Set heigth and width to mask to fill up the whole screen
        $('#mask').css({ 'width': maskWidth, 'height': maskHeight });

        //transition effect
        $('#mask').fadeIn(500);
        $('#mask').fadeTo("slow", 0.9);

        //Get the window height and width
        var winH = $(window).height();
        var winW = $(window).width();

        //Set the popup window to center
        $(id).css('top', winH / 2 - $(id).height() / 2);
        $(id).css('left', winW / 2 - $(id).width() / 2);

        //transition effect
        $(id).fadeIn(2000);

        //if close button is clicked
        $('.window .close').click(function (e) {
            //Cancel the link behavior
            e.preventDefault();

            $('#mask').hide();
            $('.window').hide();
        });

        //if mask is clicked
        $('#mask').click(function () {
            $(this).hide();
            $('.window').hide();
        });

    });

</script>

and html markup here:

 <div id="boxes">
  <div id="dialog" class="window">
    <h4 style="color:#1872AB;">Important Announcement</h4>
    <div id="popupfoot" > <a href="#" class=" agree" style="color:#f00 !important;font-weight:bold;">X</a> </div>
  </div>
  <div id="mask"></div>
</div>


i have tried using jquery.cookies and set a counter in my javascript code.
this what i have tried:

 <script type="text/javascript">
    if ($.cookie('popup') != 'seen') {
        $.cookie('popup', 'seen', { expires: 365, path: '/' }); 
        $j("#dialog").delay(2000).fadeIn();
        $j('#popupfoot').click(function (e) 
        {
            $j('#dialog').fadeOut(); 
        });
        $j('#dialog').click(function (e) {
            $j('#dialog').fadeOut();
        });
    };
</script>


how could i display it only once? i know this question has been asked here and here
i have searched a lot but with no success.
thanks in advance

3
  • Why didn't the cookies method work for you?
    – j08691
    Jan 28, 2015 at 14:56
  • @j08691 updated my answer. I know that cookies would work, maybe i'm missing something in my code.
    – Sam
    Jan 28, 2015 at 15:01
  • @DomAdams could u please illustrate more, my javascript is really bad. i have written my code after a lot of try and catch :)
    – Sam
    Jan 28, 2015 at 15:08

2 Answers 2

1

create the cookie like this (on the forth line you can change the number of days from 4 to another number):

if (document.cookie.indexOf('popupShowed=1') == -1) {
    $(document).ready(function () {
        var date = new Date();
        date.setTime(date.getTime() + (4 * 864e+5)); // 4 days
        document.cookie = 'popupShowed=1; expires=' + date.toUTCString();

        // your code here
    });
}

no need to use jquery for this simple cookie manipulation.

0
1

While you said you tried cookies but it didn't work, I wanted to give an answer that should be used AND works. By using cookies, you can set the page to only show once. Since most browsers support cookies, this is more reliable than using the internal storage engine that current browsers possess.

$(document).ready(function(){

    // test for cookie here
    if ($.cookie('test_status') != '1') {
        //show popup here
        window.open('YOUR POPUP URL HERE','windowtest','toolbar=0,status=0,width=500,height=500');

        // set cookie here if not previous set
        var date = new Date();
        var minutes = 30;
        date.setTime(date.getTime() + (minutes * 60 * 1000));
        $.cookie('test_status', '1', {expires: date});
   }

});
0

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.