显示引导莫代尔第一次加载页面(Display Bootstrap Modal First time

我想，当一个人第一次访问一个页面（登录到我的应用程序后）显示自举模式。我想使用模式提供了一个“入门”的视频，并还提供了一个“不要再展示给我”复选框，以便访问者可以绕过以后登录“入门启动模式”。

我能得到的模态，以显示与下面的教程页面加载：

启动引导模态在页面加载

但现在我卡在如何让它只显示用户第一次登录后访问该网页。（它目前推出网页刷新等）

我是新来的JavaScript和编程，并创造了我的应用程序使用Django的Python 2.7.4

我很欣赏的时间和专业知识。

Answer 1:

要做到这一点，你需要使用一个方法对数据存储有关的网站的访问，这是通常被称为之间仍然存在的用户session 。在这种特殊情况下，它听起来就像是用户可能无法登录，这被称为更具体为anonymous session 。

有许多的存储匿名会话选项提供给您。最快，最简单的是用饼干，但其他选项包括基于文件的会话，HTML5存储或数据库。

从你写的是什么，我会说，饼干可能是您的最佳解决方案。

而且，正如你所期望的，Django的已建成的功能，以缓解与cookies工作。我建议寻找到的Django的会议文件，我觉得这是真正的方便和容易学习，看看如何实现这一点。

如果您有关于在Django使用cookie（或匿名会话）的任何更具体的问题，只是让我知道，我会尽力帮助。

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

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

您可以设置天隐藏模数

Answer 4:

嗯，你可以使用localStorage的用于存储happend的动作，所以它是持续性或者你可以使用一个饼干例如名为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>

更可以发现在这里 。

如果妳接近这种方式，U不会得到你的问题（对我的作品）。

觉得你有你完整的答案。

文章来源: Display Bootstrap Modal First time page loads