索引加载前的简单窗口动画

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

但是你必须添加另一个javascript到你的(language)/index.html页面来保存它们:

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