模态对话框在网站中默认打开一次

我不想添加模态对话框作为如何使用网站的信息框。我做了代码，它的工作原理，但我的问题是，我的浏览器中有多个选项卡，我的模式对话框是默认选项卡。当我更改选项卡并再次返回到默认选项卡时，将再次显示模式对话框。打开网站时，我只想显示一次模式对话框。模态对话框在网站中默认打开一次

<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

模态对话框在网站中默认打开一次

回答

相关问题