2016-02-11 103 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/ –