JSFiddle - React, Tailwind, and code Playground

by Emmanuel Garcia

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<h3>Hi, welcome to my site</h3>

<div id="language" style="display: none">
    <p>Please choose your language</p>
    <br /> <a href="javascript:;" class="en">English</a>  <a href="javascript:;" class="es">Spanish</a>
 <a href="javascript:;" class="fr">French</a> 
</div>

JavaScript

// ref : http://stackoverflow.com/q/17004952/1055987
// JFK : http://stackoverflow.com/users/1055987/jfk
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());
                    window.location.href = "http://jsfiddle.net/SvJvh/1/show/?lang=" + lang + "";
                    $.fancybox.close();
                });
            }
        });
    }
});