在加載主頁之前顯示彈出窗口

Question

在啟動網站主頁之前，我有一個問題要顯示彈出窗口，其想法是要顯示的第一件事是彈出窗口，其中包含站點語言列表（en，fr，es，...），因此選擇這樣的語言，它將直接將我重定向到主頁：

mysite.com?lang=es

有人可以對類似的代碼或示例有個想法嗎？

Answer 1

使用模式框聽起來是個好主意。

我將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重定向。

在這里查看代碼