模態對話框在網站中默認打開一次

我不想添加模態對話框作爲如何使用網站的信息框。我做了代碼，它的工作原理，但我的問題是，我的瀏覽器中有多個選項卡，我的模式對話框是默認選項卡。當我更改選項卡並再次返回到默認選項卡時，將再次顯示模式對話框。打開網站時，我只想顯示一次模式對話框。模態對話框在網站中默認打開一次

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

感謝Patrick和ProEvilz。

來源

2017-08-29 16:58:58

模態對話框在網站中默認打開一次

回答

相關問題