Question

我有一个模态弹出窗口，仅在主页上显示页面加载。当我导航到另一个页面然后返回主页时，弹出窗口再次显示。我只希望弹出窗口在用户计算机上显示一次，无论他们导航回主页多少次。当浏览器关闭然后重新打开并且用户再次访问网站时，只有这样才能再次显示弹出窗口。如果不使用会话或数据库，这可能吗？

HTML代码：

<div class="modal fade" id="defaultModal" tabindex="-1" role="dialog" aria-labelledby="defaultModalLabel" aria-hidden="true">
<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>
            <h4 class="modal-title" id="defaultModalLabel">Default Modal Title</h4>
        </div>
        <div class="modal-body">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pellentesque neque eget diam posuere porta. Quisque ut nulla at nunc <a href="#">vehicula</a> lacinia. Proin adipiscing porta tellus, ut feugiat nibh adipiscing sit amet. In eu justo a felis faucibus ornare vel id metus. Vestibulum ante ipsum primis in faucibus.</p>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
    </div>
</div>

JavaScript代码：

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

Answer 1

你知道window.sessionStorage吗？

＆＃13;

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
var data = sessionStorage.getItem('key');

＆＃13;

您可以了解here

您可以使用sessionStorage。

当用户第一次来到主页=＆gt;设置sessionStorage变量并显示模态。
当用户导航到其他页面后返回主页时，检查sessionStorage，因为它仍然会被设置，不显示模态。
当用户关闭浏览器（或标签页）时，会清除sessionStorage并再次浏览主页将显示模式。

所以你的js代码就像：

＆＃13;

$(window).load(function(){
  
  if(sessionStorage.getItem('homePageAlreadyVisited')  == null)//The first time this will be null
    {
      sessionStorage.setItem('homePageAlreadyVisited', 'foobar'); //foobar can be anything. You are just concerned about checking whether 'homePageAlreadyVisited' key has some value or not.
      $('#defaultModal').modal('show');
    }
//now coming back to the homepage after navigating to some other pages will not execute anything as this time, if statement is false.
});

＆＃13;

Answer 2

也许在用户第一次访问网站时设置Cookie？并且只显示尚未设置cookie的模态。

当用户关闭浏览器时丢失cookie，您可以这样做：设置一个非常短的间隔，并经常短暂更新cookie。即使我不推荐这种策略，因为它创建了一整套javascript执行，我认为它应该可行。

编辑：如果可以，你可以让间隔运行频率降低，我想你可以去做。也许每分钟尝试一次？另外，不要忘记在每个页面加载上运行＆＃34;更新＆＃34; -function！

Answer 3

不使用会话或cookie，这是不可能的。如果您不想使用php_sessions（或c＃或其他），可以使用this jQuery plugin创建会话

Answer 4

验证何时打开模态。也许在用户第一次进入主页时使用网址上的内容。

不要在后退导航中显示模态弹出窗口

4 个答案: