user5447339 user5447339 - 1 month ago 4
HTML Question

How to select a language (English/French) in a popup?

<body style="text-align:center">

<h2>Popup</h2>

<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

<script>
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById('myPopup');
popup.classList.toggle('show');
}
</script>

</body>


http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup

I am trying to make a popup in the way as shown below in the images and by following procedures from the w3shools link that if someone clicks on:


Click me toggle the popup


It should display:

English (If the french language is displayed on the page)

French (If the English language is displayed on the page)

Clicking on English will display the whole webpage in English language and clicking on French will display the whole webpage in French language. I already have a JS files in which every text is translated from English to French and French to English. The snippets of it is :

define([],function(){
var exports = {
//////////////////////////////////
// Enter each key value pair as //
// "key" : "value" , //
//////////////////////////////////
// Do not edit above this line //
//////////////////////////////////
"unspecified": "Unspecified",
"yes": "Yes",
"no": "No",
"error.notify": "An error has occurred. Please contact your plan administrator.",
"error.application": "Error: 500",

"english": "English",
"french": "French",

"m": "Male",
"f": "Female",

"smoker": "smoker",
"non-smoker": "non-smoker",
//////////////////////////////////
// Do not edit below this line //
//////////////////////////////////
};
return exports;
});


English

French

Answer

Something Like this?

function myFunction() {
    var popup = document.getElementById('myPopup');
  popup.classList.toggle('show')
    if (popup.classList.toggle('show') == false) {
      if (popup.innerHTML == "English") {
          popup.innerHTML = "French";
          popup.classList.toggle('show')
      } else {
          popup.innerHTML = "English";
          popup.classList.toggle('show')
      }
    } else {
     popup.classList.toggle('show');
    }
}
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* The actual popup */
.popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -80px;
}

/* Popup arrow */
.popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

/* Toggle this class - hide and show the popup */
.popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;}
}
<h2>Popup</h2>
  <div class="popup"  onclick="myFunction()">Click to toggle the popup...
    <span class="popuptext" id="myPopup">English</span>
  </div>