[英]showing popup before loading the home page
I have an issue about to show a popup before starting the home page of my site, the idea is that the first thing to show is a popup with a list of language of site (en, fr , es ,...) so after chosing language that will redirect me directly to the home page like that : 在启动网站主页之前,我有一个问题要显示弹出窗口,其想法是要显示的第一件事是弹出窗口,其中包含站点语言列表(en,fr,es,...),因此选择这样的语言,它将直接将我重定向到主页:
mysite.com?lang=es
Can someone have an idea about a similar code or example? 有人可以对类似的代码或示例有个想法吗?
Using a modal box sounds like a good idea. 使用模式框听起来是个好主意。
I would use fancybox with this few elements : jQuery, fancybox js and css files 我将fancybox与以下几个元素一起使用:jQuery,fancybox js和css文件
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js"></script>
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
... this simple (hidden) html : ...这个简单的(隐藏的)html:
<div id="language" style="display: none">
<p>Please choose your language</p>
<a href="javascript:;" class="en">English</a>
<a href="javascript:;" class="es">Spanish</a>
<a href="javascript:;" class="fr">French</a>
... etc.
</div>
... and this script ...和这个脚本
jQuery(document).ready(function ($) {
if (!window.location.href.match(/\?lang/i)) {
$.fancybox("#language", {
modal: true,
afterShow: function () {
$("#language a").on("click", function (event) {
var lang = $(event.target).attr('class');
console.log($(event.target).html()); // if you need the full language name
window.location.href = "http://jsfiddle.net/Xbr8t/1/show/?lang=" + lang + ""; // use your own domain/site
$.fancybox.close();
});
}
});
}
});
If the URL has already the suffix ?lang=xx
then the modal won't show up. 如果URL已经有后缀?lang=xx
则该模式将不会显示。
For instance, try this URL http://jsfiddle.net/Xbr8t/1/show/?lang=es and no modal window will pop up. 例如,尝试使用此URL http://jsfiddle.net/Xbr8t/1/show/?lang=es ,不会弹出任何模式窗口。 Then this http://jsfiddle.net/Xbr8t/1/show/ that will ask for the language ... after selecting one, see the URL redirection. 然后,此http://jsfiddle.net/Xbr8t/1/show/会询问您的语言...选择一种语言后,请参阅URL重定向。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.