Javascript display none doesn't work while cookie

Question

Live site- http://www.uposonghar.com/test/test_popup.html

I add JavaScript cookie with that popup so if anyone click on "Click Here if don't want to see this Again!" button then cookie will be stored, if cookie is stored then popup will not appear for him/her.

Once i click on that button cookie stored successfully, popup(id-myModal) disappear but popup bg/overlay(id- reveal-modal-bg) appears. i add that code but that doesn't work-

if(getCookie('abc')=="def" && document.getElementById('myModal'))
   document.getElementById('myModal').style.display="none";
   document.getElementById('reveal-modal-bg').style.display="none";

There is a css on js page, maybe that overwrite my display:none as display:block- http://www.uposonghar.com/test/jquery.reveal.js

Code of js page-

if(options.animation == "none") {
                    modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
                    modalBG.css({"display":"block"});   
                    unlockModal()               
                }

Full code-

<script type="text/javascript">

        function setCookie(c_name,value,exdays)
        {
        var exdate=new Date();
        exdate.setDate(exdate.getDate() + exdays);
        var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
        document.cookie=c_name + "=" + c_value + ";path=/";
        }

        function getCookie(c_name)
        {
        var c_value = document.cookie;
        var c_start = c_value.indexOf(" " + c_name + "=");
        if (c_start == -1)
          {
          c_start = c_value.indexOf(c_name + "=");
          }
        if (c_start == -1)
          {
          c_value = null;
          }
        else
          {
          c_start = c_value.indexOf("=", c_start) + 1;
          var c_end = c_value.indexOf(";", c_start);
          if (c_end == -1)
          {
        c_end = c_value.length;
        }
        c_value = unescape(c_value.substring(c_start,c_end));
        }
        return c_value;
        }


        if(getCookie('abc')=="def" && document.getElementById('myModal'))
        document.getElementById('myModal').style.display="none";
        document.getElementById('reveal-modal-bg').style.display="none";
</script>

Can you try my answer? I have just updated it.

SajithNair
– SajithNair

2014-02-21 08:49:34 +00:00
Commented Feb 21, 2014 at 8:49 — SajithNair
– SajithNair, Commented Feb 21, 2014 at 8:49

SajithNair · Accepted Answer · 2014-02-21 09:01:35Z

1

Can you change the javascript in jquery.reveal.js to

                if(options.animation == "fadeAndPop" && getCookie('abc')!="def") {
                    modal.css({'top': $(document).scrollTop()-topOffset, 'opacity' : 0, 'visibility' : 'visible'});
                    modalBG.fadeIn(options.animationspeed/2);
                    modal.delay(options.animationspeed/2).animate({
                        "top": $(document).scrollTop()+topMeasure + 'px',
                        "opacity" : 1
                    }, options.animationspeed,unlockModal());                   
                }
                if(options.animation == "fade" && getCookie('abc')!="def") {
                    modal.css({'opacity' : 0, 'visibility' : 'visible', 'top': $(document).scrollTop()+topMeasure});
                    modalBG.fadeIn(options.animationspeed/2);
                    modal.delay(options.animationspeed/2).animate({
                        "opacity" : 1
                    }, options.animationspeed,unlockModal());                   
                } 
                if(options.animation == "none" && getCookie('abc')!="def" ) {
                            modal.css({'visibility' : 'visible', 'top':$(document).scrollTop()+topMeasure});
                            modalBG.css({"display":"block"});   
                            unlockModal()               
                }

edited Feb 21, 2014 at 9:01

answered Feb 21, 2014 at 8:36

SajithNair

3,8851 gold badge20 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jfriend00 Over a year ago

A direct style setting on an object overrides a CSS stylesheet, no matter the load order of the style sheet.

SajithNair Over a year ago

The javascript in the page is making the direct style to display block. That is why we need to make it 'none' in onLoad.

SajithNair Over a year ago

Please add it to all cases. I am not sure whether your options.animation is "none" or "fade"

Collectives™ on Stack Overflow

Javascript display none doesn't work while cookie

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related