Question

当一个人第一次访问某个页面时（登录到我的应用程序后），我正在尝试显示一个引导程序模式。我想使用模式提供“入门”视频，并提供“不再向我显示这个”复选框，以便访问者可以在将来登录时绕过“获取启动模式”。

我能够通过以下教程获得在页面加载时显示的模态：

Launch Bootstrap Modal on page load

但是现在我只是在登录后第一次用户访问页面时才停止显示它。（它目前在页面刷新时启动等）

我是javascript和编程的新手，并使用Django Python 2.7.4

创建了我的应用程序

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

Answer 1

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

Answer 2

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

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

根据您所写的内容，我会说饼干可能是最适合您的解决方案。

而且，正如您所料，Django内置了一些功能，可以轻松使用Cookie。我建议调查the documentation on Django sessions，我发现这些内容非常容易学习，并且很容易学习，以便了解如何实现这一目标。

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

Answer 3

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

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

Answer 4

好吧，你可以使用localstorage 用于存储发生的动作，因此它是持久的，或者您可以使用cookie例如名为shown并在开头将其设置为false，并在显示模态后将其设置为true。

Answer 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();
}

Answer 6

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

$(window).load(function()
{
    $('#myModal').modal('show');
});

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<div class="container">
  <!-- 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 。

如果你这样接近，你就不会得到你的问题（对我有用）。

认为你有完整的答案。

Answer 7

您可以使用此脚本，希望它能起作用：

<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 个答案: