Question

我正在使用java，java脚本和bootstrap来打开模态。但是如果用户点击取消那么我想要这个模态只有一次它不应该出现，或者在页面重新加载后它不应该显示。

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>

JAVA SCRIPT：

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

我已经看到了另外一个链接，但我没有想到。链接是：Get cookie by name

在我的代码模式显示在页面中但是当重新加载页面时它会来。每当重新加载页面时它就会到来。但我希望用户取消模态然后它不应该进入整个网站。我将把这个模态放在网站的标题中，因为标题对于所有页面都是相同的。我的网站是https://www.winni.in

我想在我的网站上只有一次模态。如果用户登陆任何页面，应该首次显示模态。

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

Runnable在线示例：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/

Answer 2

在高级别，你需要做两件事：

在显示模态对话框之前，您需要向服务器发出经过身份验证的请求，以确定是否已显示模式对话框。通过＆＃34; authenticated＆＃34;，我的意思是它包含标识浏览器和/或用户的信息（取决于浏览器会话或所有浏览器中的用户是否持久保存状态）。
在对话被取消后，您需要同样发出经过身份验证的请求以记录此新状态，以便在重新加载网站时可以在＃1中返回。

由于＃2改变了状态，因此应该使用HTTP POST操作来完成，而＃1应该使用GET来完成，因为它只是检查状态的值。在持久身份验证方面，您将使用cookie进行身份验证;通常，您希望cookie是一个大的，随机分配的，经常变化的，不可取的号码，它充当数据库中与特定用户会话相关联的记录的密钥。反过来，该会话将（在服务器上）指示该会话中的登录用户，因此充当任何其他帐户特定存储信息的管道。

您的示例代码似乎缺少这两个核心元素;你在setTimeout()中的函数不会咨询服务器（也没有表明服务器在决定发出这个JavaScript之前进行任何此类检查），该函数也没有做任何事情来更新/保持这个事实对话已经显示出来。虽然，在JavaScript中，您可以将模态对话状态直接存储在cookie中（尽管出于隐私/安全原因这通常是一个坏主意，因为直接存储在cookie中的状态可以在客户端上操作并且可以充当识别指纹）;如果您希望跨浏览器记住这一点，则需要服务器端元素。

Answer 3

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

创建一个新的servlet并触发 AJAX调用，如下所示。然后我将servoboxvalue设置为来自servlet的会话并检查会话值并根据它可以显示或不显示模态 同时参考this

    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"
});

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

3 个答案: