showing popup before loading the home page

Question

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 :

mysite.com?lang=es

Can someone have an idea about a similar code or example?

Answer 1

Using a modal box sounds like a good idea.

I would use fancybox with this few elements : jQuery, fancybox js and css files

<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 :

<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.

For instance, try this URL http://jsfiddle.net/Xbr8t/1/show/?lang=es and no modal window will pop up. Then this http://jsfiddle.net/Xbr8t/1/show/ that will ask for the language ... after selecting one, see the URL redirection.

See the code here