显示引导模式首次页面加载

Posted

技术标签:

【中文标题】显示引导模式首次页面加载【英文标题】:Display Bootstrap Modal First time page loads 【发布时间】:2013-05-11 21:03:16 【问题描述】:

当有人第一次访问页面时(登录到我的应用程序后),我正在尝试显示引导模式。我想使用该模式来提供“入门”视频并提供“不再向我显示此内容”复选框,以便访问者可以在以后登录时绕过“入门模式”。

通过以下教程,我能够在页面加载时显示模式:

Launch Bootstrap Modal on page load

但现在我不知道如何让它仅在用户登录后第一次访问页面时显示。(它目前在页面刷新等时启动)

我是 javascript 和编程新手,我使用 Django Python 2.7.4 创建了我的应用程序

我非常感谢您的时间和专业知识。

【问题讨论】:

您有几种方法,http cookies 或数据库中显示first_time 或类似内容的字段。关于cookies 的解释或使用数据库完成此操作的方法对于问题的答案来说会很长。特别是如果您不提供模型是如何定义的,但您应该阅读它们。 ***.com/a/49625698/7186739 【参考方案1】:

为此,您需要使用一种方法来存储在网站访问之间持续存在的用户数据,通常称为session。在这种特殊情况下,听起来用户可能没有登录,这更具体地称为anonymous session

您可以使用多种选项来存储匿名会话。最快和最简单的方法是使用cookies,但其他选项包括基于文件的会话、html5 存储或数据库。

根据您所写的内容,我认为 cookie 可能是最适合您的解决方案。

而且,正如您所料,Django 内置了简化 cookie 工作的功能。我建议查看the documentation on Django sessions,我发现它非常易于访问且易于学习,以了解如何实现它。

如果您对在 Django 中使用 cookie(或匿名会话)有任何更具体的问题,请告诉我,我会尽力提供帮助。

【讨论】:

完美感谢您的反馈【参考方案2】:

您可以将 jquery.cookies.js 与 modal.js 结合使用,只加载一次页面,然后设置过期 cookie。

            <script src="/path/to/jquery.cookie.js"></script>
            <script>
            $(document).ready(function() 
                 if ($.cookie(‘pop’) == null) 
                     $(‘#myModal’).modal(‘show’);
                     $.cookie(‘pop’, ’7');
                 
             );
            </script>

您可以在本教程中找到更多详细信息:

http://calebserna.com/bootstrap-modal-email-subscription-form/

【讨论】:

再次检查您的代码!你对 ' 和 ' 有错误【参考方案3】:

显示引导模式首次页面加载

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.0/jquery.cookie.min.js">
</script>
<script type="text/javascript">
 $(document).ready(function() 
     if ($.cookie('pop') == null) 
         $('#myModal').modal('show');
         $.cookie('pop', '1');
     
 );
</script>

您可以设置隐藏模式的天数

【讨论】:

【参考方案4】:

嗯,你可以使用localstorage 用于存储发生的动作,因此它是持久的,或者您可以使用 cookie 例如称为 shown 并在开始时将其设置为 false,在显示模式后您只需将其设置为 true。

【讨论】:

【参考方案5】:

肯定会有办法用 Django 做到这一点。例如,您可以存储用户的 IP,并跟踪该 IP 上的用户是否曾经点击过“不再显示此内容”按钮。这将是确定您没有向要求不观看视频的人展示视频的唯一真实方法。在前端,用户可以随时清除自己的 cookie 或本地存储,这样前端跟踪就会丢失。

也就是说,这是一个实际示例,因为您提到了 JavaScript 新手:

// When the user clicks the button...
localStorage.setItem('no_display', 'true');

// When a user visits the page...
var no_display = localStorage.getItem('no_display');
if (no_display !== 'true') 
  display_the_modal();

【讨论】:

【参考方案6】:

你可以使用这个脚本,我希望它会起作用:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> 
</script>
  
<script type="text/javascript">
 $(document).ready(function() 
     if (sessionStorage.getItem('#myModal') !== 'true') 
         $('#myModal').modal('show');
         sessionStorage.setItem('#myModal','true');     
     
 );
</script>

【讨论】:

【参考方案7】:

你可以试试这个可运行的代码-

$(document).ready(function() 
     if ($.cookie('pop') == null) 
         $('#myModal').modal('show');
         $.cookie('pop', '7');
     
);
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

更多信息请关注here

如果你以这种方式接近,你将不会遇到你的问题(对我有用)。

所以,所做的就是将状态保存在 cookie 中。根据 cookie 决定是否需要在第一次显示弹出窗口。

【讨论】:

保存状态以不再加载/显示的部分在哪里? 答案已确定,请立即尝试

以上是关于显示引导模式首次页面加载的主要内容,如果未能解决你的问题,请参考以下文章

如何在引导程序中的页面加载时打开模式对话框

Asp.net mvc 问题将部分页面加载到引导模式中

如何使用内部 html 和引导程序使这个简单的 jQuery 弹出模式在页面加载时显示

页面加载时的引导模式打开 [重复]

在页面加载时显示此引导模式 [重复]

使用 ajax 在引导模式上加载动态图像