javascript - Show modal once per visit - Stack Overflow

admin管理员组

文章数量:1425176

I know this question is asked many times before, but I can't still find any solution to my 'problem' to show my modal only one time per visit. I've tried also many different (cookie) scripts but nothing works in bination with the existing script. Many, many Thanks!

HTML

<div id="MyPopup" class="overlay">
  <div class="autopop">
    <a class="close" href="#MyPopup">&times;</a>
    <div class="a-content">
      Some content goes here.
    </div>
  </div>
</div>

CSS

.overlay::before,
.overlay .autopop {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
}
.overlay::before {
  content: "";
  background: rgba(0, 0, 0, .8);
  display: block;
  z-index: 99990
}
.overlay .autopop {
  width: 30%;
  height: 70%;
  margin: auto;
  font: 18px/1.5em Open Sans;
  background: #ff9933;
  border-radius: 5px;
  box-shadow: 0 10px 15px 0 #000;
  z-index: 99999;
  transition: all 3s ease-in-out;
}
.overlay:target::before {
  display: none;
}
.overlay:target .autopop {
  top: -200%;
  right: -200%;
  transform: rotate(90deg);
}
.autopop .a-content {
  height: 100%;
  overflow: auto;
  padding: 0 10px;
}
.autopop .close {
  top: 0;
  right: 15px;
  font: 800 30px Open Sans;
  color: #fff !important;
  transition: all 0.2s;
  position: absolute;
}

JQUERY (to start popup with a delay}

$(document).ready(function(){
   $("#MyPopup").hide(0).delay(7000).fadeIn(0)}
);

I know this question is asked many times before, but I can't still find any solution to my 'problem' to show my modal only one time per visit. I've tried also many different (cookie) scripts but nothing works in bination with the existing script. Many, many Thanks!

HTML

<div id="MyPopup" class="overlay">
  <div class="autopop">
    <a class="close" href="#MyPopup">&times;</a>
    <div class="a-content">
      Some content goes here.
    </div>
  </div>
</div>

CSS

.overlay::before,
.overlay .autopop {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  position: fixed;
}
.overlay::before {
  content: "";
  background: rgba(0, 0, 0, .8);
  display: block;
  z-index: 99990
}
.overlay .autopop {
  width: 30%;
  height: 70%;
  margin: auto;
  font: 18px/1.5em Open Sans;
  background: #ff9933;
  border-radius: 5px;
  box-shadow: 0 10px 15px 0 #000;
  z-index: 99999;
  transition: all 3s ease-in-out;
}
.overlay:target::before {
  display: none;
}
.overlay:target .autopop {
  top: -200%;
  right: -200%;
  transform: rotate(90deg);
}
.autopop .a-content {
  height: 100%;
  overflow: auto;
  padding: 0 10px;
}
.autopop .close {
  top: 0;
  right: 15px;
  font: 800 30px Open Sans;
  color: #fff !important;
  transition: all 0.2s;
  position: absolute;
}

JQUERY (to start popup with a delay}

$(document).ready(function(){
   $("#MyPopup").hide(0).delay(7000).fadeIn(0)}
);

• javascript
• jquery
• popup
• show
• fadeout

Share Improve this question Follow edited Jun 8, 2020 at 5:46 Mosh Feu 29.4k1818 gold badges9393 silver badges141141 bronze badges asked Feb 11, 2016 at 11:44 Michaël ThönnissenMichaël Thönnissen 13922 silver badges1010 bronze badges 5

• You don't appear to be using cookies at all in your jQuery example. – James Donnelly Commented Feb 11, 2016 at 11:45
• 2 A cookie is the way to do this, so you should show that attempt. – Alex K. Commented Feb 11, 2016 at 11:45
• I know, I tried using some cookies before and don't know which cookie 'fits'. – Michaël Thönnissen Commented Feb 11, 2016 at 11:49
• 1 You can use html5 local storage which is better than old cookies trick. – Arun Sharma Commented Feb 11, 2016 at 11:50
• As mentioned by others, use cookies MDN document.cookie – Martin M Commented Feb 11, 2016 at 12:27

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

The full answer for the cookie option is:

1. Once you shows the popup, add a cookie to the browser.
2. In each time the, check if the browser has this cookie.

You can't see the result here because of technic reason (the iframe of the preview is setted as sanbox iframe) so you can see it here.

Note: for cross browser support it's better to use cookie instead of localStorage.

function setCookie(cname, cvalue, exdays) {
  var d = new Date();
  d.setTime(d.getTime() + (exdays*24*60*60*1000));
  var expires = "expires="+d.toUTCString();
  document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1);
    if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
  }
  return "";
}

var cookie = getCookie('shown');
if (!cookie) {
  showPopup();
}

function showPopup() {
  setCookie('shown', 'true', 365);
  document.querySelector('#MyPopup').style.display = 'block';
}

#MyPopup {
  display:none;  
}

<div id="MyPopup" class="overlay">
  <div class="autopop">
    <a class="close" href="#MyPopup">&times;</a>
    <div class="a-content">
      Some content goes here.
    </div>
  </div>
</div>

Why don't you use localstorage?

Example code:

if (localStorage.getItem('IsModalShown').toString() != 'true') 
{
   showModal();
   localStorage.setItem('IsModalShown',true);
}

本文标签： javascriptShow modal once per visitStack Overflow