2016-02-11 116 views
0

我使用这个从Twitters Bootstrap的一点点代码在我的Wordpress主题。有没有一种方式,当用户关闭窗口时,即使刷新后它仍然保持关闭状态?我需要窗口在会议的其余时间或至少一个小时内保持关闭状态。Javascript定时器/引导程序/ Wordpress

刷新后窗口重新开始。

<div class="alert alert-note alert-dismissible fade in" role=alert> 
       <button type=button class=close data-dismiss=alert aria-label=Close> 
        <span aria-hidden=true>&times;</span> 
       </button> 
       <h2>Upgrade to Pro for £2</h4> 
       <p>Upgrade to a voclr.it Pro Account for just £2 a month and unlock many great features.</p> 
       <div class="row"> 
        <div class="col-sm-4"> 
         <h4>Previews</h4> 
         <img src="<?php bloginfo('template_url') ?>/img/start4.png" alt="start4" width="64" height="64"> 
        </div> 
        <div class="col-sm-4"> 
         <h4>Premium Sample Packs</h4> 
         <img src="<?php bloginfo('template_url') ?>/img/pulse2.png" alt="pulse2" width="64" height="64"> 
        </div> 
        <div class="col-sm-4"> 
         <h4>No More Adverts</h4> 
         <img src="<?php bloginfo('template_url') ?>/img/forbidden.png" alt="forbidden" width="64" height="64"> 
        </div> 
       </div> 

      </div> 
+0

有你尝试过localStorage吗? – designtocode

回答

1

下面是一个使用本地存储sessionStorage更加精确的例子。

https://jsfiddle.net/Pigbot/dwbynr6y/

//Check if 'hidden' variable is defined 
if (typeof (hidden) !== 'undefined') { 
// If the 'hidden' variable is defined don't do anything 
} else { 
    // If the 'hidden' variable is NOT defined 
    // Check if browser supports Local Storage 
    if(typeof(Storage) !== "undefined") { 
     // Set the 'hidden' variable to the value of the local storage item 
     var hidden = sessionStorage.getItem("theDiv"); 

      // If the 'hidden' variable is set to the string 'hidden' the hide the div 
      if(hidden === "hidden"){ 
       $('.alert-dismissible').hide(); 
      } 

     //If the 'hidden' variable is not set to the value of the local 
     //storage item then the div will be visible and so will the button 

     //Click function on buttom to set the local storage and fadeout the div 
     $('button.close').click(function(){ 
      sessionStorage.setItem("theDiv", "hidden"); 
      hidden = sessionStorage.getItem("theDiv"); 
      $('.alert-dismissible').fadeOut(); 
     }); 

    } else {} 
} 

//This button is an example of removing the item from local storage 
$('button.clear').click(function(){ 
    sessionStorage.removeItem("theDiv"); 
}); 

window.localStorage - 商店的没有到期日的数据

window.sessionStorage - 一个会话存储数据(当浏览器关闭标签数据丢失)

+0

这工作完美,我不善于与JS,但我会采取一个好看,并从中吸取教训。谢谢。 –

+0

博客http://www.barecode.co/keep-bootstrap-alertmessage-closed-until-end-of-session/ –