6

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

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

在页面加载时启动引导模式

但现在我被困在如何让它只在用户登录后第一次访问页面时显示。（它目前在页面刷新等时启动）

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

我真的很感激时间和专业知识。

4

7 回答 7

7

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

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

从您所写的内容来看，我认为 cookie 可能是您的最佳解决方案。

而且，正如您所料，Django 内置了简化使用 cookie 的功能。我建议查看有关 Django session 的文档，我发现该文档非常易于访问且易于学习，以了解如何实现这一点。

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

于 2013-05-16T20:06:55.840 回答
7

您可以将 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/

于 2014-04-07T07:47:05.560 回答
5

显示 Bootstrap Modal 首次页面加载

<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>

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

于 2018-04-03T08:40:25.627 回答
1

好吧，您可以使用localstorage 来存储发生的操作，因此它是持久的，或者您可以使用例如调用的cookieshown并在开始时将其设置为 false，在显示模式之后您只需将其设置为 true。

于 2013-05-16T20:09:16.650 回答
1

肯定会有办法用 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();
}
于 2013-05-16T20:16:13.613 回答
0

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

<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>
于 2020-09-02T07:43:13.870 回答
-1

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

$(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>

更多可以在这里找到。

如果您以这种方式接近，您将不会遇到问题（对我有用）。

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

于 2016-04-28T06:22:06.197 回答