Модальное диалоговое окно открывается по умолчанию один раз на веб-сайте

Question

Я не хочу добавлять модальное диалоговое окно в качестве информационного окна о том, как использовать веб-сайт. Я сделал код, он работает, но моя проблема в том, что у меня есть несколько вкладок в браузере, и мой модальный диалог находится на вкладке по умолчанию. Когда я меняю вкладки и снова возвращаюсь к вкладке по умолчанию, снова отображается модальное диалоговое окно. Я хочу показывать модальное диалоговое окно только один раз при открытии сайта.

 <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">&times;</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>

javascript css html twitter-bootstrap

0

Seema Barate 29 Авг 2017 в 12:09

Answer 1

Вы можете использовать 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, чтобы показать, как это работает.

1

Patrick Mlr 30 Авг 2017 в 04:54

Answer 2

Наконец-то решена проблема.

$(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.

2

Seema Barate 29 Авг 2017 в 16:58

Answer 3

Пытаться:

<script>
var visited = false;
$(document).ready(function () {
  if (visited == false) {
    $('#memberModal').modal('show');
    visited = true;
  }
});
</script>

0

Ashley Brown 29 Авг 2017 в 11:32

Модальное диалоговое окно открывается по умолчанию один раз на веб-сайте

3 ответа

Похожие вопросы

Новые вопросы

javascript