0

I'm trying to get a popup to show on load once per session. I'm seeing it okay from my end but my client is saying that he's not seeing it after the first time even after restarting his browser and clearing the cache.

Is there something I should change with the code below? Also, I'm unable to click the close button on mobile with touch. How can I make #popup-close respond to touch?

HTML

<div id="popup-wrap">
    <div id="popup">
        <div id="popup-close">&times;</div>
        <a href="http://google.com/" target="_blank">
            <img src="image.jpg" width="100">
        </a>
        <h2>We are featured this month in Architectural Digest!</h2>
        <a href="http://www.architecturaldigest.com/" target="_blank">Read the article &raquo;</a>
    </div>
</div>

JS

if (localStorage.getItem('popState') != 'shown'){
    $("#popup-wrap").delay(2000).fadeIn();
    localStorage.setItem('popState','shown')
}

$('#popup-close').click(function(e) {
    e.preventDefault();
    $('#popup-wrap').fadeOut(); // Now the pop up is hidden.
});

CSS

#popup-wrap {
    background: #fff;
    box-shadow: 1px 0 3px #999;
    display: none;
    font-family: 'montserrat', sans-serif;
    height: 210px;
    left: 50%;
    margin-left: -250px;
    margin-top: -105px;
    opacity: .8;
    position: absolute;
    text-transform: uppercase;
    top: 50%;
    width: 500px;
    z-index: 11;
}

#popup {
    padding: 40px;
    position: absolute;
}

#popup-close {
    cursor: pointer;
    font-size: 36px;
    position: absolute;
    right: 10px;
    top: 0;
}

#popup img {
    float: left;
    margin-right: 20px;
}

#popup h2 {
    color: #222;
    font-size: 20px;
    margin-bottom: .5em;
}

#popup a {
    font-size: 12px;
    text-decoration: none;
}

http://jsfiddle.net/23gu3L0h/

J82
  • 8,267
  • 23
  • 58
  • 87

1 Answers1

0

You may try to change localStorage to sessionStorage like I have done In this Fiddle.

localStorage is meant for longterm use where as sessionStorage is more shortterm. Here is another post with some answers explaining them further.

It shows up once until you either clear your cache or restart your browser.

Also the I was able to close the pop-up from my phone in the fiddle.

Hope this helps.

Community
  • 1
  • 1
Matthew
  • 922
  • 1
  • 6
  • 21
  • Thanks, I'll try switching it to `sessionStorage`. I'm still unable to touch close the box on mobile, though. Would you mind [taking a look](http://keebs.com/dax) to see if you can close it on yours? – J82 Mar 10 '15 at 02:06
  • I was still able to close it on mobile, I used two different browsers also (mobile standard browser, and Chrome) both worked. What kind of phone is causing the issue? and is it only your phone that is having that problem? – Matthew Mar 10 '15 at 02:09
  • Was your mobile an iPhone by any chance? It's not working on my iPhone 5s with Safari. – J82 Mar 10 '15 at 02:10
  • I have a Samsung Galaxy Note 4, Let me do some digging. Ill let you know what I find. – Matthew Mar 10 '15 at 02:13
  • check out @Mike Barwick answer [here](http://stackoverflow.com/questions/20204255/anchor-tag-not-working-in-safari-ios-for-iphone-ipod-touch-ipad) he provides some javascript that will work cross-platform. – Matthew Mar 10 '15 at 02:22
  • I tried the solution in that thread, but for some reason it's still not working. I even tried changing the non anchor element (div) into an anchor element, but still no dice. I'll keep trying, though. Thanks for pointing me in the right direction. – J82 Mar 10 '15 at 02:48
  • thought this might be worth mentioning, I found in a couple of posts people were saying that when they remove the 'www' and add //: in front of the URL it solved their problem with the touch not working. Glad I could at least point you in the right direction. Hopefully you find the solution you are looking for. please mark my answer as correct if the sessionStorage fixes the problem your client is having. Happy Coding – Matthew Mar 10 '15 at 03:46