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

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

1 个答案: