Я не хочу добавлять модальное диалоговое окно в качестве информационного окна о том, как использовать веб-сайт. Я сделал код, он работает, но моя проблема в том, что у меня есть несколько вкладок в браузере, и мой модальный диалог находится на вкладке по умолчанию. Когда я меняю вкладки и снова возвращаюсь к вкладке по умолчанию, снова отображается модальное диалоговое окно. Я хочу показывать модальное диалоговое окно только один раз при открытии сайта.
<body onload="mumbai();">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><span><img style="height:20px;width:20px;"src="http://cdn.9appsdownloading.com/group1/M01/35/1C/poYBAFcpqU-AFa5CAAAMm35WLrc217.png"></span><h3 style="display:inline;color:white">Urban Growth of Indian Cities</h3></a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Mumbai</a></li>
<li class="divider"></li>
<li><a href="master1.html">Delhi</a></li>
<li class="divider"></li>
<li><a href="Bengaluru.html">Bengaluru</a></li>
<li class="divider"></li>
<li><a href="Chennai.html">Chennai</a></li>
<li class="divider"></li>
<li><a href="Kolkata.html">Kolkata</a></li>
<li class="divider"></li>
<li><a href="Hyderabad.html">Hyderabad</a></li>
</ul>
</div>
</div>
</nav>
<div class="modal fade" id="memberModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<!--<h4 class="modal-title" id="memberModalLabel">Thank you for signing in!</h4>-->
</div>
<div class="modal-body">
<img src="images/Webmap_info_25_8_2017.png"></img>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$('#memberModal').modal('show');
});
</script>
3 ответа
Вы можете использовать sessionStorage, чтобы определить, что пользователь только что посетил ваш первый сайт:
$(document).ready(function() {
var firstSite = sessionStorage['firstSite'];
if (!firstSite) { // or firstSite != "visited"
// some code here if the user is new to the site
$('#memberModal').modal('show');
sessionStorage['firstSite'] = "visited";
}
});
sessionStorage поддерживает отдельную область хранения для каждого источника это доступно на время сеанса страницы (до тех пор, пока браузер открыт, включая перезагрузку страницы и восстановление)
Вот jsFiddle, чтобы показать, как это работает.
Наконец-то решена проблема.
$(document).ready(function() {
var yetVisited =sessionStorage['visited'];
if (!yetVisited) {
$("#Modal").modal("show").on("shown", function () {
window.setTimeout(function () {
$("#Modal").modal("hide");
}, 20000);
});
// open popup
sessionStorage['visited'] ="yes";
}
});
Спасибо Патрик и ProEvilz.
Пытаться:
<script>
var visited = false;
$(document).ready(function () {
if (visited == false) {
$('#memberModal').modal('show');
visited = true;
}
});
</script>
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.