ウェブサイトのモーダルダイアログがデフォルトで1回開きます

ウェブサイトの使用方法に関する情報ボックスとしてモーダルダイアログを追加することはできません。私はコードを行って、それは動作しますが、私の問題は、ブラウザに複数のタブがあり、モーダルダイアログがデフォルトタブにあることです。タブを変更して再びデフォルトのタブに戻ると、モーダルダイアログが再度表示されます。私はモーダルダイアログをウェブサイトを開くときに1回だけ表示したい。ウェブサイトのモーダルダイアログがデフォルトで1回開きます

<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>

出典

2017-08-29 Seema Barate

タブをクリックするか、コンテンツを変更するだけでサイトをリロードしますか？ –

すべてのページは別々のもので、すべてが互いにリンクされています。タブをクリックすると新しいページが開きます。 –

あなたはユーザーは自分の最初のサイトを訪問したことを識別するために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 maintains a separate storage area for each given origin that's available for the duration of the page session (as long as the browser is open, including page reloads and restores)

をここでどのように表示するjsFiddleですできます。

出典

2017-08-29 11:51:13

あなたのコードにモデルIDを入れます。 –

@SeemaBarateあなたのコードをそこに追加しました。 –

これらの行については、var firstSite = sessionStorage ['firstSite'];エラー：予想外の識別子。 –

試してみてください。

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

出典

2017-08-29 11:32:32 ProEvilz

ああ、申し訳ありませんが、私はこの開発とその最初のウェブサイトの新しいです。提案のおかげで。 –

最後に解決された問題です。

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

出典

2017-08-29 16:58:58

ウェブサイトのモーダルダイアログがデフォルトで1回開きます

答えて

関連する問題