javascript - js如何让弹窗只出现一次？-6ren

javascript - js如何让弹窗只出现一次？

转载作者：行者123 更新时间：2023-12-03 03:31:02

25

4

我正在尝试创建一个 30 秒后过期的 cookie。如果用户在这 30 秒之间刷新页面，则弹出窗口不应在 cookie 过期时弹出。如果用户在 30 秒后刷新页面，应该会看到它。我的问题是它不断出现，不会停止。我怎样才能阻止呢？

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Bootstrap Core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Latest jQuery Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Bootstrap Core JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <!-- Cookie JS for Modal -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
  <script type="text/javascript">
	$(document).ready(function(){
		$("#myModal").modal('show');
		
	});
	
	
</script>
<script>
   function createCookie(name) {
   debugger;
   var date = new Date();
   date.setTime(date.getTime()+(30*1000));
  // alert(date);
   var expires = "; expires="+date.toString();
   document.cookie = name+"="+expires+"; path=/";
//alert(document.cookie);
}
function showbanner()
{
document.write('<div class="container-fluid"><div id="myModal" class="modal fade">    <div class="modal-dialog">        <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : <a href="mailto:PLAYATGYM@GMAIL.COM" target="_top">PLAYATGYM@GMAIL.COM </a> </p><p>OR CALL :<a href="514-795-4266"> 514-795-4266</a> </p> </div></div></div> </div> </div></div></div>');
 
}
  </script>
  
</head>

<body>
<script>
var ban = document.cookie;

createCookie('banner');
if(ban==""){
showbanner();
}

</script>


  

</body>
</html>

最佳答案

我会使用 localStorage 而不是 cookie。不用担心过期，只需在加载时保存当前日期并检查是否比上次加载超过 30 秒:

var lastVisited = window.localStorage.getItem('last visited');
console.log(
  'It has been',
  Date.now() - 5000 > Date.parse(lastVisited) ? 'more' : 'less',
  'than 5 seconds since your last visit.'
)
window.localStorage.setItem('last visited', new Date());

整页:

<!DOCTYPE html>
<html lang="en">

<head>
  <!-- Bootstrap Core CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <!-- Latest jQuery Library -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <!-- Bootstrap Core JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <!-- Cookie JS for Modal -->
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function() {
      $("#myModal").modal('show');

    });
  </script>
  <script>
    function showBanner(name) {
      var lastVisited = window.localStorage.getItem('last visited');
      if (lastVisited == null || Date.now() - 5000 > Date.parse(lastVisited)) {
        document.write('<div class="container-fluid"><div id="myModal" class="modal fade">    <div class="modal-dialog">        <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h3>REGISTER FOR FALL SESSION</h3></div><div class="modal-body"><div class="row"><div class="col-xs-12 col-sm-6"> <img src="gym.png" alt="gym_promo" style="width:304px;"></div><div class="col-xs-12 col-sm-6"><h3> Reserve Your Spot Today </h3><p> EMAIL : <a href="mailto:PLAYATGYM@GMAIL.COM" target="_top">PLAYATGYM@GMAIL.COM </a> </p><p>OR CALL :<a href="514-795-4266"> 514-795-4266</a> </p> </div></div></div> </div> </div></div></div>');
      }
      window.localStorage.setItem('last visited', new Date());
    }
    showBanner();
  </script>
</head>
<body>
</body>
</html>

关于javascript - js如何让弹窗只出现一次？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46101636/

25

4

0

文章推荐： javascript - module.exports 不会导出带有函数的对象

文章推荐： delphi - 控制Delphi表单组件破坏顺序

文章推荐： html - 视频上的按钮叠加

文章推荐： Javascript 模块模式和空对象

从用户控制到应用中心的 Silverlight 弹窗
我在用户控件内有一个带有“边框”500x500 的弹出窗口...当用户单击按钮打开此弹出窗口时，我希望边框显示在应用程序的中心(水平/垂直)而不是用户控件。我该怎么做？最佳答案您可以获取根视觉对
ios - UIPickerView 弹窗
我生成的代码有什么问题？我试图让 UIPickerView 在点击文本字段时弹出，然后在做出选择后消失。文本字段应该显示之后选择的内容。 import UIKit class CreateAJob_V
css - UI设计——弹窗
我目前正在开发一个网站。让我叙述一下我面临的问题: 当用户打开网站时，他们会在一个小弹出窗口中看到两个选项。弹出窗口中的第一个选项将指向子域 1 弹出窗口中的第二个选项将指向子域 2 现在我的问题
Python爬虫之Selenium警告框(弹窗)处理
JavaScript 有三种弹窗 Alert (只有确定按钮), Confirmation (确定,取消等按钮), Prompt (有输入对话框)，而且弹出的窗口是不能通过前端工具对其进行定位的，这
twitter-bootstrap - Bootstrap 弹窗
我希望能够在弹出窗口外单击以使其消失。此代码运行良好 - 在打开另一个弹出窗口时关闭一个弹出窗口，当然当您再次单击该按钮时它会消失。 var $visiblePopover; $('body').o
jquery - stackoverflow如何实现逐渐消失的 "Please consider . . "弹窗
我想看看 stackoverflow 是否使用单独的插件来执行那些亮黄色的弹出窗口，上面写着“请考虑将此答案标记为已接受或“请考虑添加评论以说明您为什么投了反对票” 这是为此使用了一个 jquery
android - 什么时候跑!! Android Studio 弹窗 v23
以下样式定义以某种方式破坏了我的屏幕并使 R 类变为红色。看截图here和 here ?android:attr/ratingB
java - 如何在 Spring 中为初次使用的用户实现 cookie 弹窗
关闭。这个问题需要更多focused .它目前不接受答案。想改进这个问题吗？更新问题，使其只关注一个问题 editing this post . 关闭 4 年前。 Improve this qu
javascript - 绕过 IE "The webpage you are viewing..."弹窗
有没有办法绕过下面的IE弹框: The webapge you are viewing is trying to close the window. Do you want to close this
iOS "This in-app purchase has already been bought"弹窗
我的 iOS 应用程序出现问题:当我触摸“购买”按钮购买 IAP 产品时，弹出窗口显示此消息: This In-App purchase has already been bought. It wil
c++ - Windows 10 上的 Code::blocks 弹窗
我正在 Windows 上学习 OpenCV，我正在使用 Code::bloks。当我调用 imshow() 的函数时，它会显示一个弹出窗口，其中有图像。问题是我无法缩放此窗口，因此看不到像素值。最
javascript - 禁用 "Changes you made may not be saved"弹窗
我使用以下前端代码导出 .csv 文档。 HTML {% csrf_token %} DOWNLOAD JS $('#export-link').click(function(e

首页

博学

6Ren·AI

商城

javascript - js如何让弹窗只出现一次？