Как выбрать язык (английский/французский) во всплывающем окне?

<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

Я пытаюсь создать всплывающее окно, как показано ниже на изображениях, и следуя процедурам из ссылки w3shools, если кто-то нажмет:

Нажмите на меня, чтобы переключить всплывающее окно

Он должен отображать:

Английский (если на странице отображается французский язык)

Французский (если английский язык отображается на странице)

При нажатии на английский язык отображается вся веб-страница на английском языке, а при нажатии на французском языке отображается вся веб-страница на французском языке. У меня уже есть файлы JS, в которых каждый текст переведен с английского на французский и с французского на английский. Фрагменты из него:

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

английский

Французский


javascript web html popup popupwindow
person Community    schedule 20.10.2016    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Что-то вроде этого?

function myFunction() {
  var popup = document.getElementById('myPopup');
  popup.classList.toggle('show')
  if (!popup.classList.toggle('show')) {
    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>

person Rick Sibley    schedule 20.10.2016
comment
Привет, Рик, я хочу, чтобы всплывающее окно вело себя так же, как вы, но как я могу импортировать JS здесь, в этот код? Как и при нажатии на английский и французский языки, я хочу, чтобы веб-страница была полностью переведена на английский и французский языки. Файл JS: - person ; 20.10.2016
comment
/////////////////////////////////// // Не редактируйте ниже этой строки // ////// //////////////////////////// }; обратный экспорт; }); - person ; 20.10.2016
comment
определить([],функция(){ var exports = { - person ; 20.10.2016
comment
Я не знаю, как включить ваш код перевода, но почему бы не использовать веб-переводчик Google? translate.google.com/manager/website/?hl=ru - person Rick Sibley; 21.10.2016
comment
@user5447339 Я сделал пример здесь paymaster.net/net3/test - person Rick Sibley; 21.10.2016