在javascript中整个网站只自动打开一次模态

Question

我正在使用 java、java 脚本和引导程序来打开模式。但如果用户单击取消，我只希望此模式出现一次，那么它不应该出现，或者在页面重新加载后不应该显示。

HTML:

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Subscribe our Newsletter</h4>
            </div>
            <div class="modal-body">
                <img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD">

            </div>
        </div>
    </div>
</div>

脚本：

 $(document).ready(function(){
            setTimeout(function(){
        $("#myModal").modal('show');
    },3000);
    });

我又看到了一个链接，但我不明白。链接是： 按名称获取cookie

在我的代码模式中显示在页面中但是当重新加载页面时它会出现。每当重新加载页面时，它就会出现。但我希望用户取消模式，那么它不应该出现在整个网站中。我会将此模式放在网站的标题中，因为所有页面的标题都相同。我的网站是 https://www.winni.in

我只希望在我的网站上显示一次模态。如果用户登陆任何页面，则应显示第一次模态。

原文由 Varun Sharma 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你需要一些东西来保持模态打开的状态，你应该能够使用本地存储来这样做，但是在大多数情况下 cookie 会更容易。

请参阅下面的代码示例：

     $(document).ready(function(){
            setTimeout(function(){
            if(!Cookies.get('modalShown')) {
                $("#myModal").modal('show');
              Cookies.set('modalShown', true);
            } else {
                alert('Your modal won\'t show again as it\'s shown before.');
            }

    },3000);
 });

可运行在线示例：http: //jsfiddle.net/z3bh5gh2/2/

更新：

我推荐使用这个插件来创建模式： https ://github.com/nakupanda/bootstrap3-dialog

此示例使用 BootstrapDialog 做与您的示例相同的事情，但代码看起来更干净整洁：

 $(document).ready(function(){
setTimeout(function(){
    BootstrapDialog.show({
    title: 'Subscribe our Newsletter',
    message: '<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcRYXNLuN8M8-f0TZUM9DIiMD3bNN6B8hyvlyttFrUdN423bn7ZD">'
  });
},3000);

});

同样，这是一个在线示例 http://jsfiddle.net/n7mkLoko/1/

原文由 badboy 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用会话来完成 这就是您使用 java 和 javascipt 设置会话的方式

创建一个新的 servlet 并触发一个 AJAX 调用，如下所示。然后我将 comboboxvalue 设置为来自 servlet 的会话并检查会话值 并基于它你可以 显示或不显示模态 也参考 这个

    this._on( this.input, {
    autocompleteselect: function( event, ui ) {
        $.ajax({
        type: 'POST',
        url: 'AjaxServlet',
        dataType : 'json',
        data: { comboboxvalue : ui.item.value  }
        });
        ui.item.option.selected = true;
        this._trigger( "select", event, {
            item: ui.item.option
        });
    },

    autocompletechange: "_removeIfInvalid"
});

原文由 Amar Singh 发布，翻译遵循 CC BY-SA 3.0 许可协议