twitter-bootstrap 使用javascript在整个网站中仅自动打开一次模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34892311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Automatically open modal only one time in whole website in javascript
提问by V SH
I am using java, java script and bootstrap to open the modal. But i want this modal only one time if user click to cancel then it should not appear or it should not display after page reloading.
我正在使用 java、java 脚本和引导程序打开模态。但是我只想要这个模式一次，如果用户点击取消，那么它不应该出现，或者在页面重新加载后不应该显示。
HTML:
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);
});
I have seen one more link, But i did not get idea. Link is:Get cookie by name
我又看到了一个链接，但我不明白。链接是：按名称获取cookie
In my code modal show in a page But when reload the page it will come. Whenever reload the page it will comes. But i want user cancel the modal then it should not come in whole website. I will put this modal in header of the website because header is same for all the pages. My website is https://www.winni.in
在我的代码模式显示在一个页面但是当重新加载页面时它会来。每当重新加载页面时，它就会出现。但我希望用户取消模态，然后它不应该出现在整个网站中。我会将这个模式放在网站的标题中，因为所有页面的标题都是相同的。我的网站是https://www.winni.in
I want modal only one time in my website. If user land in any page first time modal should be display.
我只想在我的网站上使用一次模态。如果用户第一次登陆任何页面，则应显示模态。
回答by badboy
You need something to hold the status of modal opening, you should be able to use local storage to do so, however cookie would be more trouble-free in most cases.
你需要一些东西来保持模式打开的状态，你应该可以使用本地存储来做到这一点，但是在大多数情况下 cookie 会更无故障。
See below for a code sample:
请参阅下面的代码示例：
$(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 online example: http://jsfiddle.net/z3bh5gh2/2/
可运行的在线示例：http: //jsfiddle.net/z3bh5gh2/2/
Update:
更新：
I recommend to use this plugin to create modals: https://github.com/nakupanda/bootstrap3-dialog
我推荐使用这个插件来创建模态：https: //github.com/nakupanda/bootstrap3-dialog
This example doing the same thing using BootstrapDialog as your example does, but the code looks more clean and neat:
此示例使用 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);
});
});
And again, here is an online example http://jsfiddle.net/n7mkLoko/1/
再次，这是一个在线示例http://jsfiddle.net/n7mkLoko/1/
回答by Michael Aaron Safyan
At a high-level, you need to do two things:
在高层次上，您需要做两件事：
Before showing the modal dialogue, you need to issue an authenticated request to your server to determine whether the modal dialogue has already been shown. By "authenticated", I mean that it contains information identifying the browser and/or user (depending on whether the state is persisted for a browser session or for a user across all browsers).
After the dialogue has been dismissed, you will need to similarly issue an authenticated request to record this new state so that it can be returned in #1 when the website is reloaded.
在显示模态对话之前，您需要向您的服务器发出一个经过身份验证的请求，以确定是否已经显示了模态对话。通过“已认证”，我的意思是它包含识别浏览器和/或用户的信息（取决于状态是为浏览器会话还是为所有浏览器的用户保留）。
对话被解除后，您将需要类似地发出一个经过身份验证的请求来记录这个新状态，以便在重新加载网站时可以在 #1 中返回它。
Since #2 changes the state, it should be done with a HTTP POSToperation, while #1 should be done with a GETsince it merely checks the value of the state. In terms of persisting authentication, you will do so using a cookie; typically, you want the cookie to be a large, randomly assigned, frequently changing, unguessable number that acts as a key into your database for the record(s) associated with a particular user session. That session, in turn, would (on the server) indicate the logged-in user(s) in that session and thus acts as a conduit to any other account-specific stored information.
由于#2 更改状态，因此应该使用 HTTPPOST操作完成，而 #1 应该使用 a 完成，GET因为它仅检查状态的值。在持久身份验证方面，您将使用 cookie 来实现；通常，您希望 cookie 是一个大的、随机分配的、经常变化的、不可猜测的数字，作为与特定用户会话相关联的记录的数据库的密钥。反过来，该会话将（在服务器上）指示该会话中的登录用户，从而充当任何其他特定于帐户的存储信息的管道。
Your example code seems to be missing these two core elements; the function that you have in setTimeout()does not consult the server (nor have you indicated that the server does any such checking before it decides to emit this JavaScript), nor does the function do anything to update/persist the fact that the dialogue has been shown. While, in just JavaScript, you can store the modal dialogue state directly in a cookie (though this is generally a bad idea for privacy/security reasons, since state stored directly in cookies can be manipulated on the client and can act as an identifying fingerprint); if you want this to be remembered across browsers, a server-side element will be required.
您的示例代码似乎缺少这两个核心元素；您使用的函数setTimeout()不会咨询服务器（您也没有表示服务器在决定发出此 JavaScript 之前会进行任何此类检查），也不会执行任何操作来更新/保留已显示对话的事实. 而在 JavaScript 中，您可以将模态对话状态直接存储在 cookie 中（尽管出于隐私/安全原因，这通常是一个坏主意，因为直接存储在 cookie 中的状态可以在客户端上进行操作，并且可以充当识别指纹); 如果您希望跨浏览器记住这一点，则需要一个服务器端元素。
回答by Amar Singh
You can do it using sessions This is how you set a session using java and javascipt
您可以使用会话来完成这就是您使用 java 和 javascipt 设置会话的方式
Create a new servlet and trigger an AJAX callas below. Then i set comboboxvalue to session from servlet and check the session valueand based on it you can show or not show the modalRefer thistoo
创建一个新的 servlet 并触发一个AJAX 调用，如下所示。然后，我从servlet的设置comboboxvalue会话和检查会话值，并在此基础上可以显示或不显示模态请参阅本太
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"
});
