索引加載前的簡單窗口動畫

Question

在我的索引頁面加載之前，我想彈出一個窗口供用戶選擇網站的首選語言，然後點擊加載例如/english/index.html或/ spanish/index .html，我必須從哪裏開始。

我可以使用jQuery來做到這一點嗎？

Answer 1

你可以添加一個div代碼到你的網頁：

document.addEventListener('DOMContentLoaded', function() {  
 
    document.querySelector('a.close').addEventListener('click', function(e) { 
 
    document.getElementById('language-popup').style.display = 'none'; 
 
    }); 
 
});

#language-popup { 
 
    background-color: #AAAAFF; 
 
    font-family: Verdana; 
 
    padding: 12px; 
 
    border-radius: 10px; 
 
    width: 50%; 
 
    position: absolute; 
 
    top: 50px; 
 
    left: 50%; 
 
    margin-left: -25%; 
 
} 
 

 
#language-popup h3 { 
 
    text-align: center; 
 
} 
 

 
#language-popup ul { 
 
    list-style-type: none; 
 
} 
 

 
#language-popup a { 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 

 
#language-popup a:hover { 
 
    text-decoration: underline; 
 
} 
 

 
#language-popup .close { 
 
    float: right; 
 
} 
 

 
#language-popup .close:hover { 
 
    text-decoration: none; 
 
} 
 

 
#language-popup .close:after { 
 
    content: '✖'; 
 
    cursor: pointer; 
 
}

<div id="language-popup"> 
 
    <a class='close'></a> 
 
    <h3>Select your preferred language</h3> 
 
    <nav> 
 
    <ul> 
 
     <li><a href='english/index.html'>English</a> 
 
     </li> 
 
     <li><a href='espanol/index.html'>Español</a> 
 
     </li> 
 
     <li><a href='portugues/index.html'>Português - BR</a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</div>

然後，您可以改善它，看看如果用戶已經有一個保存的語言首選項，如：

var userPreference = localStorage.get('user-language-preference'); 
if (userPreference) window.location.assign(userPreference); 

但是您必須在您的(language)/index.html頁面中添加另一個javascript以保存它們：

localStorage.setItem('user-language-preference', window.location.href);