在加载主页之前显示弹出窗口

showing popup before loading the home page

本文关键字：窗口 显示 加载 主页      更新时间：2023-09-26

我有一个关于在开始我的网站主页之前显示一个弹出窗口的问题，这个想法是，首先要显示的是一个带有网站语言列表(en, fr, es，…)的弹出窗口，所以在选择语言后，将我直接重定向到主页，像这样:

mysite.com?lang=es

是否有人对类似的代码或示例有想法?

使用模态框听起来是个好主意。

我会使用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" />

…这个简单的(隐藏的)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>

…这个脚本

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

如果URL已经有后缀?lang=xx，那么模式将不会显示。

例如，试试这个URL http://jsfiddle.net/Xbr8t/1/show/?lang=es，不会弹出模态窗口。然后这个http://jsfiddle.net/Xbr8t/1/show/将询问语言…选择一个后，查看URL重定向

查看这里的代码

相关文章：